前端提高篇(121):es6解构赋值

数组解构赋值

基本使用：

1.必须要进行初始化
2.可以在解构中忽略一些项
3.互换两个变量的值

let arr = [1, 2, 3]
let [a, b, c] = arr; //初始化
console.log(a, b, c); //输出：1 2 3，很适合在多层嵌套时取内层数据时使用

let [,d,] = arr; // 可以忽略一些值，但需要预留位置
console.log(d); // 输出：2

let x = 1, y = 2;
[x,y] = [y,x]; //调换位置
console.log(x, y); //输出：2 1

使用默认值

1.当指定位置的项不存在，如传的是空数组，得到的就是undefined
2.指定位置的值为undefined（需要严格恒等于undefined，===，不能是null），将默认值赋值给变量
没有使用默认值，将空数组赋值给解构数组时：

let arr1 = []
let [i,j] = arr1;
console.log(i, j); // 输出undefined undefined

使用默认值时：

let arr1 = []
let [i=10, j=20] = arr1;
console.log(i, j); // 输出10 20

当传入null时，不会触发默认值，仅当不传值 / undefined

let arr1 = [null]
let [i=10, j=20] = arr1;
console.log(i, j); // 输出null 20，j值本为undefined，现用默认值

对象解构赋值

基本使用

1.必须要进行初始化
2.在赋值的时候使用解构赋值
3.解构赋值表达式的值是表达式右侧的值

小知识点：

let name = "ccy"
let obj = {
    name: name
};
console.log(obj);

其中，name: name中的第一个name是字符串，第二个name是变量名，但可以简写成：

let name = "ccy"
let obj = {
    name
};
console.log(obj);

效果一致，输出均为一个对象，里面一个name属性，值为"ccy"

然后是解构对象基本使用案例：
解构变量定义的同时初始化

let obj = {
    name: "ccy",
    age: 10,
};
let {name:name1, age:age1} = obj; // 初始化
console.log(name1, age1); //输出：ccy 10
// 或者写成：
// let {name, age} = obj; //同样是先定义name和age，然后在等号右侧找有没有属性名与name和age匹配的，然后分别赋值
// console.log(name, age); //输出：ccy 10

当解构对象的定义与初始化分开时，需要给赋值语句加上括号，系统才能将左边部分识别成对象，左右两边与等号构成表达式
否则仅是当成两个代码块，两个代码块之间是不能进行赋值的

let obj = {
    name: "ccy",
    age: 10,
};

let name, age;
({name:name1, age:age1} = obj); 
console.log(name1, age1); //输出：ccy 10

解构赋值表达式的值是表达式右侧的值

console.log({}=obj); // 输出obj对象

案例2：可以将解构对象传入函数，函数也能之间使用解构定义的变量

function fn(value){
    console.log(name, age); // 输出：ccy 10
    console.log(value); // 输出obj对象
}

fn({name, age} = obj);

默认值的使用与数组解构默认值同理，当赋的值严格为undefined时，使用默认值

数组解构与对象解构混用

只需记得模式匹配即可，等号左边和等号右边，哪里有嵌套，用数组或者对象，均一一对应

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

let {nums:[a, b, c]} = {nums:[1,2,3]};
console.log(a,b,c);