ES6 数组、对象的解构

数组的解构

以前的普通方法获取数组内的值

//以前的普通方法
const arr = [1,2,3];
const a = arr[0];
const b = arr[1];
const c = arr[2];
console.log(a,b,c);

ES6 中 利用数组结构，可以很简单的将数组中的值获取到

//数组解构  （给一个数组赋值被解构数组,按位置提取被解构数组的元素）
const arr = [1, 2, 3];
//将a,c,b按顺序存入数组，再给它赋值arr，就能按顺序获取到数组arr的值
const [a,c,b] = arr;
console.log(a, b, c);//132

相应只获取arr某个位置的值时，前面的该有的逗号不可省

const arr = [1, 2, 3];
//相应只获取arr某个位置的值时，前面的该有的逗号不可省
const [,,b] = arr;
console.log(b);//3

想要让b获取2，3，4所有的值，用…即可

const arr = [1, 2, 3, 4];
//想要让b获取2，3，4所有的值，用...即可
const [a,...b] = arr;//注意....只能用在最后一个变量前面，从当前位置截取到最后都存储在b
console.log(b);//是一个数组，数组里存储的是2，3，4

当const数组解构位置的成员的少于数组时，结构仍按顺序执行

// const数组解构位置的成员的少于数组
const arr = [1, 2, 3];
const [b] = arr;//从前往后解构
console.log(b);//1

当const数组解构位置的成员的多于数组，按照顺序结构，超出的成员，数组中没有足够的元素时，超出部分就是undefined

// const数组解构位置的成员的多于数组
const arr = [1, 2, 3];
const [a,b,c,d = 100,f,r] = arr;//从前往后解构,超过的是undefined
console.log(a,b,c,d,f,r);//1,2,3,100,undefined,undefined（d接收了默认值100）

对象的解构

利用对象结构简化了对对象的操作

// 对象的解构
const obj = {name:"li",age:21};
const {name,year=2020,age,id} = obj;
console.log(name +"," + year +"," + age + "," + id);
 //输出为： li,2020,21,undefined

利用对象结构，还可以简化console.log()的书写

//利用对象解构简化console.log
const {log} = console;
log(123);
//简化了代码