ES6新增特性

一、解构赋值

解构代表分解数据结构，赋值指的是为对象赋值
es6中允许从数组中提取值，按照对应的位置，对变量赋值。对象也可以实现解构。

1.1 数组解构

*按照一一对应的方法，给数组变量赋值
1.变量的个数和值的个数一致，一一对应
let [a,b,c] = [1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
2.变量的个数和值的个数不一致，没有对应关系的变量的值为undefined
let [a,b,c,d] = [1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined

1.2 对象解构

*本质：变量的名字匹配属性的名字，如果匹配成功，就将对象属性的值赋值给变量
1.变量名和对象属性名一致
let person = {name:'小白'，age:20}
let { name, age} =person
console.log(name) // '小白'
console.log(age) // 20

2.变量名和对象属性名不一致
let person = {name:'小白'，age:20}
let { name:myname, age:myage} =person
console.log(myname) // '小白'
console.log(myage) // 20

图解：

二、箭头函数

2.1箭头函数的简化语法

1. 【省略 形参列表括号】： 只有一个形参时，可以省略小括号；没有形参不能省略小括号

 const fn = x => console.log(x);
 fn(10)

2. 【省略 函数体大括号】：函数体只有一个语句时，可以省略大括号

const fn2 = (x,y) => console.log(x+y)
fn2(2,3)

3. 【省略 函数中的关键字return 】：当函数体只有一句话时，可以省略return关键字

const fn3 = (x,y) => x+y
console.log(fn3(3,6));

2.2 箭头函数的属性

【箭头函数不绑定this,箭头函数没有自己的this关键字】：箭头函数中没有this,访问的是父函数作用域中的this

 function fn4(){
       let cat = '小白'
       console.log(this);  //window

       let fn = () => {
       console.log(cat);
       console.log(this);  //箭头函数中没有this 此处的this是父函数的，也是window
      }
      fn()
}
     fn4() 

*上述代码片段执行结果：

三、剩余参数

…

四、数组的查找方式

4.1. find -> 查找数组元素

• 语法：数组.find(回调函数)
• 回调函数：这里用箭头函数，形参表示数组的元素，函数体是查找条件

let arr = [
	{id:1,
	name:'小白'
	},
	{id:2,
	name:'小黑'
	},
]
let obj = arr.find(e=>e.id === 1)
console.log(obj);

4.2. findIndex -> 查找数组元素的下标

• 语法：数组.findIndex(回调函数)
• 回调函数：这里用箭头函数，形参1表示数组的元素，形参2表示数组的索引，函数体是查找条件
• 作用：找出第一个符合条件的数组元素的下标

let arr = [
	{id:1,
	name:'小白'
	},
	{id:2,
	name:'小黑'
	},
]
let index = arr.findIndex((val,index)=> index === 1)
console.log(index);