ES6 解构赋值

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

1.数组的解构赋值

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

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

            let [, , third] = [1, 2, 3];
            console.log(third); //输出3

            let [head, ...tail] = [1, 2, 3, 4];
            console.log(head, tail); //输出1 [2, 3, 4]

            let [x, y, ...z] = ['a'];
            console.log(x, y, z); //输出a undefined []

            let [a,b] = [1];
            console.log(b); //输出undefined

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

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

默认值

            let [x, y = 'b'] = ['a'];
            console.log(x, y); // x='a', y='b'

            let [x, y = 'b'] = ['a', undefined]; 
            console.log(x, y);// x='a', y='b'

只有当一个数组成员严格等于undefined，默认值才会生效。如果一个数组成员是null，默认值就不会生效。

            let [x = 1] = [undefined];
            console.log(x); //x = 1

            let [x = 1] = [null];
            console.log(x); //x = null

2.对象的解构赋值

        {
            let {foo, bar} = {foo:'aaa', bar:'bbb'};
            console.log(foo, bar);
        }

        {
            let {bar, foo} = {foo:'aaa', bar:'bbb'};
            console.log(foo, bar);
        }

        {
            let {baz} = {foo:'aaa', bar:'bbb'};
            console.log(baz);
        }

        {
            let { log, sin, cos } = Math;
        }

        {
            const { log } = console;
            log('hello') // hello
        }

如果变量名和属性名不一致，必须写成如下形式

        {
            let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
            console.log(baz);// "aaa"

            let obj = { first: 'hello', last: 'world' };
            let { first: f, last: l } = obj;
            console.log(f, l); //hello world
        }

        {
            let obj = {
                p: [
                    'Hello',
                    { y: 'World' }
                ]
            };

            let {p, p: [x, { y }] } = obj;
            console.log(p);  //输出['Hello', { y: 'World' }]
            console.log(x, y); //Hello World

        }

        {
            const node = {
                loc: {
                    start: {
                        line: 1,
                        column: 5
                    }
                }
            };

            let {loc, loc:{start}, loc:{start:{line}}} = node;
            console.log(loc);
            console.log(start);
            console.log(line);
        }

        {
            let obj = {};
            let arr = [];
            ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
            console.log(obj); //{prop:123}
            console.log(arr); //[true]
        }

默认值

        {
            var {x = 3} = {};
            console.log(x);// 3

        }

        {
            var {x, y = 5} = {x: 1};
            console.log(x, y); //1 5
        }

        {
            var {x: y = 3} = {};
            console.log(y);// 3

        }
        {
            
            var {x: y = 3} = {x: 5};
            console.log(y); //5
        }
        {
            var { message: msg = 'Something went wrong' } = {};
            console.log(msg); // "Something went wrong"
        }

默认值生效的条件是，对象的属性值严格等于undefined。

        {
            var {x = 3} = {x: undefined};
            console.log(x); //3
        }
        {
            var {x = 3} = {x: null};
            console.log(x); //null
        }

3.字符串的解构赋值

        {
            const [a,b,c,d,e] = 'hello';
            console.log(a,b,c,d,e);

            const {length: len} = 'hello';
            console.log(len);
        }

4.数值和布尔值的解构赋值

        {
            let {toString: s} = 123;
            console.log(s === Number.prototype.toString); // true
        }
        {
            let {toString: s} = true;
            console.log(s === Boolean.prototype.toString); // true
        }

5.函数参数的解构赋值

        {
            function add([x, y]){
                return x + y;
            }
            console.log(add([1, 2])); // 3
        }

        {    
            console.log([[1, 2], [3, 4]].map(([a, b]) => a + b));//[3,7]
        }

        {
            function move({x = 0, y = 0} = {}) {
                return [x, y];
            }

            console.log(move({x: 3, y: 8})); //[3, 8]
            console.log(move({x: 3})); //[3, 0]
            console.log(move({})); //[0, 0]
            console.log(move()); //[0, 0]
        }

        {
            function move({x, y} = {x:0, y:0}) {
                return [x, y];
            }

            console.log(move({x: 3, y: 8})); //[3, 8]
            console.log(move({x: 3})); //[3, undefined]
            console.log(move({})); //[undefined, undefined]
            console.log(move()); //[0, 0]
        }