变量的解构赋值

ES6解构：从数组或对象中提取值，并把值赋值给对应的变量。

数组的解构赋值

数组的元素是按次序排列的，变量的取值由它的位置决定。

完全解构

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

            let [d, [e, f]] = [4, [5, 6]];
            console.log(d, e, f);       //4, 5, 6

        }

不完全解构

        {
            //解构不成功，变量的值为undefined 
            let [g] = [];
            console.log(g);             //undfined

            let [a, b, c] = ['a', 'b'];
            console.log(a, b, c);      //a, b, undfined
        }

使用默认值

只有当一个数组成员严格等于(===)undefined，默认值才会生效

        {
            let [x, y = 2] = [1];
            console.log(x, y);          //1, 2

            let [a, b = 4] = [3, undefined];
            console.log(a, b);          //3, 4

            //只有右边数组成员严格等于undefined时默认值才生效，所以这里默认值不生效，赋给d一个null值
            let [c, d = 6] = [5, null]
            console.log(c, d);          //5, null
        }

默认值可以是变量

        //原则：该变量必须在使用之前声明
        {
            let [x = 1, y = x] = [];
            // let [a = b, b = 1] = [];    //这里报错，因为在执行a = b时，b没有声明，所以错误
            console.log(x, y);  //1, 1
        }

练习题

        //考察点：数组解析使用默认值的规则：
        //有右边数组成员严格等于undefined时默认值才生效，所以这里默认值不生效
        {
            let fn = function() {
                console.log('function is running');
            }
            let [x = fn()] = [1];
        }
        //需求，把它更改成分支语句：
        {
            let x;
            let fn = function() {
                console.log('function is running');
            }
            //[1][0]解析：[1]为一个数组，内部只有一个元素，值为1    [1][0]:取数组[1]中索引为0的元素，也就是1
            if ([1][0] === undefined) {
                x = fn();
            } else {
                x = 1;
            }
        }

对象的解构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

写法：

let {匹配模式(必须与目标键名一致)：变量名} = 目标对象

        {
            let {b: second, a: first} = {a: 1, b: 2};
            console.log(first, second);     //1, 2
            let {c: test} = {a: 1, b: 2};
            console.log(test);      //undefined
        }

省略变量名

如果变量名与键名一致，可以省略变量名。

        {
            // let {a: a, b: b} = {a: 1, b: 2};
            // console.log(a, b);     //1, 2
            //等价于
            let {a, b} = {a: 1, b: 2};
            console.log(a, b);     //1, 2
        }

无序搜索

无序搜索，且搜索不到返回undfined。

        {
            let {b: second, a: first} = {a: 1, b: 2};
            console.log(first, second);     //1, 2
            let {c: test} = {a: 1, b: 2};
            console.log(test);      //undefined
        }

数组解构与对象解构嵌套使用

        {
            let obj = {
                p: [
                    'Hello',
                    { y: 'World' }
                ]
            };
            let {p: [a, {y: b}]} = obj;
            console.log(a, b);  //Hello World
        }
        //解析
        //1. 对象解构赋值：{p:[]} = obj;
        //2. 数组解构赋值：[a, {}] = ['Hello', { y: 'World' }]
        //3. 对象解构赋值：{y: b} = {y: 'World'}