【ES6+】003-ES6新特性：简化对象和函数写法、箭头函数

目录

一、简化对象和函数写法

1、概述

2、代码示例及相关说明

二、箭头函数

1、概述

2、箭头函数的注意点

3、特性

4、代码演示及相关说明

5、运行结果

6、箭头函数的实践和应用场景

需求-1：点击 div 2s 后颜色变成『粉色』

需求-2  从数组中返回偶数的元素

---

一、简化对象和函数写法

1、概述

 

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁；

 

2、代码示例及相关说明

 

二、箭头函数

1、概述

ES6允许使用箭头（=>）定义函数，箭头函数提供了一种更加简洁的函数书写方式，箭头函数多用于匿名函数的定义；

 

2、箭头函数的注意点

1. 如果形参只有一个，则小括号可以省略；

2. 函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果；

3. 箭头函数 this 指向声明时所在作用域下 this 的值；

4. 箭头函数不能作为构造函数实例化；

5. 不能使用 arguments；

 

3、特性

1. 箭头函数的this是静态的，始终指向函数声明时所在作用域下的this的值；

2. 不能作为构造实例化对象；

3. 不能使用 arguments 变量；

 

4、代码演示及相关说明

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适；

 

5、运行结果

 

6、箭头函数的实践和应用场景

需求-1：点击 div 2s 后颜色变成『粉色』

传统写法存在问题：

代码：

报错：

传统写法问题解决：

 

ES6写法：

（从这个案例中就能理解ES6箭头函数的特性了）

 

需求-2  从数组中返回偶数的元素