数组的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。（允许按照一定模式从数组和对象中提取值，对变量进行赋值）

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值，本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。（模式匹配，需要等号两边的模式相同，左边的变量才会被右边赋对应值）

一、完全解构

1. 以数组的模式解构[1,2,3]数组，给变量[x,y,z]赋值

        let [x,y,z]=[1,2,3];//以数组的模式解构[1,2,3]数组，给变量[x,y,z]赋值
        console.log(x,y,z);
        let [foo,[[bar],baz]]=[1,[[2],3]];//1 2 3
        // let [foo,[bar,baz]]=[1,[[2],3]];//1 [2] 3
        // let [foo,[[bar],baz]]=[1,[2,3]]//报错 模式不匹配
        console.log(foo,bar,baz);

2.剩余运算符：  格式：  ...a

        只能写在最后,写其他位置会报错，前面的变量使用之后，有剩余的所有都是变量a的（返回的是数组），如果没有剩余的，则返回空数组

        let[...aa]=[1,2,3];//...剩余运算符:全部都要
        console.log(aa);//返回数组1,2,3]
        let[bb,...cc]=[1,2,3];
        console.log(bb,cc)//1  [2, 3]
        let[qq,...ww]=[1]; 
        console.log(qq,ww);//1 []

3.不会跳过空位

        let [x1,,y1]=[1,2,3]
        console.log(x1,y1);//1 3

二、不完全解构

1. 变量大于赋值:没有被赋值的变量返回undefined

        let[a1,b1,c1]=[1,2];
        console.log(a1,b1,c1);// 1 2 undefined

2. 变量小于赋值:没有的就不管了

        let[a2,b3]=[1,2,3];
        console.log(a1,b1);//1 2  

三、默认值的设置和使用

1.默认值的设置

        let [q1=11,q2]=[1,2];

2.赋值的时候，有值则赋值，没有就使用默认值（当值(===)undefined的的时候,触发默认值）

        let [q1=11,q2]=[1,2];
        console.log(q1,q2);//1  2   q1=0 是默认值 有值则赋值,没有就使用默认值
        let [q3=11,q4]=[,2];//11  2   q1=0 是默认值 有值则赋值,没有就使用默认值
        console.log(q3,q4);
        let [q5=11,q6]=[undefined,2];//11  2
        console.log(q5,q6);
        //当值(===)undefined的的时候,触发默认值

3.如果默认值是表达式的话,那么表达式是惰性求值(只有用到的时候才会执行)

        function fn() {
            console.log("fn");
            return 123;
        }
        let [w1=fn()]=[1];
        console.log(w1);//1 fn 不会打印
        let [w2=fn()]=[];//w2 =数组的返回值
        console.log(w2);//"fn"  123  (使用了fn 函数会执行(打印):"fn"  函数的返回值=w2,返回值是123)

4.数组的右侧可以是有其他有Iterator接口的类型：字符串 数组 类数组 set结构等

        let [x4]="str";//
        console.log(x4);//s  "str"字符串的第0位(一一对应)