4.解构赋值

解构赋值： 解构赋值是对赋值运算符的一种扩展，它针对数组和对象来进行操作。
优点： 代码书写上简洁易读

es5取值：

let node = {
    type: 'click',
    name: 'tom'
};
let type = node.type;
let name = node.name;
console.log(type, name);//click tom

es6解构取值：

解构分为完全解构和不完全解构
完全解构： 将对象或数组中所有的值全部解构出来
不完全解构： 只把对象或数组中一部分值解构出来
注意： 对对象进行解构时，{}中的变量名一定要和原解构对象中的属性名一样。

//完全解构
let node = {
    type: 'click',
    name: 'tom'
};
let {type, name} = node;
console.log(type, name);//click tom

//不完全解构
let obj = {
    a: {
        name: "张三"
    },
    b: [],
    c: 'hello,world'
};
let {a} = obj;
console.log(a);//{name: "张三"}

使用剩余运算符进行解构：

let obj = {
    a: {
        name: "张三"
    },
    b: [],
    c: 'hello,world'
};
// 剩余运算符
let {a, ...res} = obj;
console.log(res);//{b: Array(0), c: "hello,world"}

注意： 这边得到的res是一个对象，而在函数中使用剩余运算符做剩余参数时得到的是一个数组。

带有默认值的解构：

let {a, b = 30} = {a: 20};
console.log(a, b);//a = 20 b = 30

对数组进行解构：

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

数组嵌套解构：

let [a, [b], c] = [1, [2], 3];//注意：这边b一定要加[]
console.log(a, b, c);//1 2 3

注意： b一定要加上[],否则b得到的还会是一个数组。