ES6_入门（5）_解构赋值

学习参考：http://es6.ruanyifeng.com/#docs/destructuring

    //2017/7/20
        /*对象的解构赋值*/
        //对象的解构赋值，当变量名的对象的属性名相同时，才能取到正确的值。
        /*1*/
        let {foo,bar}={foo:"aaa",bar:"bbb"};
        console.log(foo);//aaa
        console.log(bar);//bbb

        //变量名与属性名不相同，必须写成下面这样
        /*2*/
        var {foo:baz}={foo:'aaa',bar:'bbb'};
        console.log(baz);//aaa
        console.log(foo);//es6.html:701 Uncaught ReferenceError: foo is not defined

        //对象的解构赋值是下面形式的简写.对象的结果赋值的内部机制，是先找到同名属性，然后在赋给对应的变量。真正被赋值的是后者，而不是前者。
        /*3*/
        let{foo:foo,bar:bar}={foo:'aaa',bar:'bbb'};

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

        let{p:[x,{y}]}=obj;
        console.log(p);//es6.html:714 Uncaught ReferenceError: p is not defined。注意：这里p是模式，不是变量，因此不会被赋值。
        console.log(x);//Hello
        console.log(y);//world

        //如果想要p被赋值，可以写成下面的形式
        /*4*/
        let obj={
            p:[
                'Hello',
                {y:'world'}
            ]
        };

        let{p,p:[x,{y}]}=obj;
        console.log(p);//["Hello", Object]
        console.log(x);
        console.log(y);

        /*5*/
        var node={
            loc:{
                start:{
                    line:1,
                    colum:5
                }
            }
        };
        var {loc,loc:{start},loc:{start:{line}}}=node;
        console.log(loc);//Object {start: Object}
        console.log(start);//Object {line: 1, colum: 5}
        console.log(line);//1。这里对line的属性的解构赋值，只有line是变量，loc和start都是模式，不是变量。

        //对象解构指定默认值的条件是，对象的属性值严格等于undefined。
        /*6*/
        console.log(null==undefined);//true
        console.log(null===undefined);//false

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

        var {y=5}={y:null};
        console.log(y);//null


        //解构失败，对象的值等于undefined。
        /*7*/
        let {foo}={bar:2};
        console.log(foo);//undefined


        /*注意*/
        /*8*/
        let x;
        {x}={x:1};//es6.html:763 Uncaught SyntaxError: Unexpected token =
        /*上面代码报错的原因是JavaScript引擎会将{x}理解成一个代码块，从而发生语法错，所以以下代码将整个解构赋值语句，放在圆括号里，可以正确执行。*/
        /*9*/
        let x;
        ({x}={x:2});
        console.log(x);//2

        //字符串解构赋值
        /*10*/
        const [a,b,c,d,e]='hello';
        console.log(e);//o

        let {length:len}='hello';
        console.log(len);//5        


         /*解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。*/
         /*11*/
         let{prop:x}=undefined;
         let{prop:y}=null;//es6.html:779 Uncaught TypeError: Cannot match against 'undefined' or 'null'.

         /*以下三种解构赋值不能使用圆括号*/
         //(1)变量声明语句
         //(2)函数参数，函数参数也属于变量声明，因此不能带有圆括号。
         //(3)赋值语句的模式。不能将整个模式或是部分模式放在圆括号中。

         /*可以使用圆括号的情况：赋值语句的非模式部分*/
         /*12*/
         let x=1;
         let y=2;
         [x,y]=[y,x];
         console.log(x);//2
         console.log(y);//1