ES6-解构赋值

解构赋值是一种快速为变量赋值的简介语法，本质上仍然是为变量赋值。

分为：数组解构、对象解构

数组解构

数组解构是将数组的单元值快速批量赋值给一系列变量的简介语法。

基本语法：

1.赋值运算符=左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2.变量的顺序对应数组单元值的位置依次进行赋值操作

3.使用时如果前面有语句一定要加；（因为数组会和前面的值连接起来）

对象解构

对象解构是将对象的属性和方法快速批量赋值给一系列变量的简洁语法。

基本语法：

1.赋值运算符=左侧的{}用于批量声明变量，右侧对象的属性值将被赋值给左侧的变量

2.对象属性的值将被赋值给与属性名相同的变量

3.注意解构的变量名不要和外面的变量名冲突否则报错

4.对象中找不到与变量名一致的属性时变量值为undefined

典型应用

交换变量

let a = 1
let b = 2;//必须有;否则会报错
let [a,b] = [b,a]//a=2,b=1

数组

const arr = [1,2,3,4];
let [a,b,c,d] = arr;//a=1,b2,c=3,d=4

let [foo] = [];
let [bar, foo] = [1];//bar=1,foo=undefined

 防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值；对象同理。

[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

多维数组

const [a, b, [c, d]] = [1, 2, [3, 4]]
console.log(a, b, c, d)//1,2,3,4

对象

({ a, b } = { a: 10, b: 20 })
//等价于({ a:a, b:b } = { a: 10, b: 20 })
console.log(a) // 10
console.log(b) // 20

 可以从一个对象中提取变量并同时修改新的变量名（旧变量名:新变量名）

let { p: foo, q: bar } = { p: 42, q: true };
console.log(foo); // 42
console.log(bar); // true

var { a: aa = 10, b: bb = 5 } = { a: 3 };
console.log(aa); // 3
console.log(bb); // 5

数组对象

const pig = [{ name: '佩奇', tage: 6 }]
const [{ name, tage }] = pig
console.log(name, tage)//佩奇 6

 多级对象

     const pig = {
      name: '佩奇',
      family: {
        mother: '猪妈妈',
        father: '猪爸爸',
        brother: '乔治'
      },
      age: 6
    }
    const { name, family: { mother, father, brother } } = pig
    console.log(name, mother, father, brother)//佩奇 猪妈妈 猪妈妈 乔治

剩余参数...获取剩余单元值，但只能置于最末位

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

忽略某些返回值

var [a , , b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 3