ES6解构赋值

一、什么是解构赋值

解构赋值是赋值运算符的扩展，简单来说，就是左边一个结构，右边一个结构，左右一一对应进行赋值。

二、解构赋值的分类

后四种是前两种的延伸

• 数组解构赋值
• 对象解构赋值
• 字符串解构赋值
• 布尔值解构赋值
• 函数参数解构赋值
• 数值解构赋值

三、数组解构赋值

1.基本解构赋值

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

2.可嵌套解构赋值

let [a,[[b],c]] = ["张三",[[1],2]]
console.log(a,b,c)  // 张三 1 2

3.可忽略解构赋值

let [a, ,b] = [true,false,0]
console.log(a,b)  // true 0

4.不完全解构

let [a,b] = ["张三",]
console.log(a,b)  // 张三 undefined

5.剩余运算符

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

6.字符串等

在数组的解构中，解构的目标若为可遍历对象，皆可进行解构赋值。

let [a,b,c,d] = 'nice';
console.log(a,b,c,d)  // n i c e

7.解构默认值

当解构模式有匹配结果，且匹配结果是undefined时，会触发默认值作为返回结果

let [a=1] = [undefined]
console.log(a)   // 1
let [b=2,c=b] = []
console.log(b,c)  // 2 2
let [d=3,e=d] = [1]
console.log(d,e)   // 1 1
let [f=4,g=f] = [1,2]
console.log(f,g)   // 1 2

四、对象解构赋值

1.基本解构赋值

let obj = {
    name:"张三",
    age:20,
}
let {name,age} = obj
console.log(name,age)  // 张三 20

2.可嵌套解构赋值

let {name,age,hobby:{one}} = obj
console.log(name,age,one)  // 张三 20 蓝球

3.可忽略解构赋值

let obj = {
    name:"张三",
    age:20,
    hobby:['蓝球',{two:"唱歌"}]
}
let {hobby:[one,{}]} = obj
console.log(one)  // 张三 20 蓝球

4.不完全解构

let {name,age} = {name:"张三",};
console.log(name,age) // 张三 undefined

5.剩余运算符

let obj = {
    name:"张三",
    age:20,
    gender:"male",
    hobby:{
        one:"蓝球",
        two:"足球"
    }
}
let {name,age,...rest} = obj;
console.log(name,age,rest) // 张三 20 {gender: 'male', hobby: {…}}

6.解构默认值

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