简单介绍

ES6 允许我们在一定的模式下，从数组、对象中去提取值，并对变量进行赋值，这就是解构赋值，在我们从前要提取数组、对象的值时要这样做：

let obj = {
    name: '老狗',
    age: 20,
    gender: '男',
    message: {
        str: 'asd'
    }
}

let name = obj.name
let age = obj.age
let gender = obj.gender
let message = obj.message.str
console.log(name, age, gender, message) // 老狗 20 男 asd

有了ES6的解构赋值可以这样写：

let obj = {
    name: '老狗',
    age: 20,
    gender: '男',
    message: {
        str: 'asd'
    }
}

let {name,age,gender} = obj
console.log(name,age,gender) // 老狗  20  男

//解构重命名
let {name:names} = obj
console.log(names) //老狗

//嵌套解构
let {message:{str}} = obj
console.log(message) // asd

1.数组解构

数组中使用嵌套解构赋值

let [A,B,[C,D]] = [1,2[3,4]]
console.log(A) //1
console.log(B) //2
console.log(C) //3
console.log(D) //4

变量与值一一对应的时候，就会赋值，如果有变量，但是没值的时候，就会出现下面的情况

不完全结构

let [A,B] = [1]
console.log(A) //1
console.log(B) //undefined

上面的情况，左边的值与右边没有一一对应的时候，就会出现赋值不成功，也就是类似其中的B等于undefined，这种情况就是解构不成功，变量的值是undefined，相当于只声明了变量B，但是没赋值

允许设定默认值

let [A,B=2] = [1]
console.log(A) //1
console.log(B) //2
//如果带默认值，但是右边有值对应，这时会覆盖默认值
let [A,B=2] = [1，3]
console.log(A) //1
console.log(B) //3

这种默认值也是ES6的语法

2.对象解构

let {A,B,C,D}={A:1,B:2,C:3,D:4}
console.log(A); // 1
console.log(B); // 2
console.log(C); // 3
console.log(D); // 4

let {A,B,C,D}={D:4,A:1,C:3,B:2}
console.log(A); // 1
console.log(B); // 2
console.log(C); // 3
console.log(D); // 4

此时我们会发现，无论右边的数据顺序怎么调换，都不会影响赋值结果，可见对象赋值和数组是不一样的，对象赋值的依据是变量名
如果变量找不到与名字相同的属性，会赋值不成功

let { A } = {'B':2};
console.log(A); // undefined

对象解构赋值也可以嵌套/添加默认值，写法类似数组

let {A:{B}} = {'A':{'B':1}};
console.log(B); // 1

let {A,B=2} = {'A':1};
console.log(A); // 1
console.log(B); // 2

3.字符串解构赋值

let [A, B, C, D, E] = 'hello';
A // "h"
B // "e"
C // "l"
D // "l"
E // "o"