ES2015中的解构赋值

ES2015中允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为”解构(Destructering)“。

以前，为变量赋值，只能指定值。

     /**
      * 以前，为变量赋值，只能直接指定值
      * **/
     let a = 1;//第一种：变量赋值
     let b = 2;
     let c = 3;
     /**
      * 现在ES2015允许这样:数组和对象
      * **/
     let [a,b,c] = [1,2,3];//第二种：数组的解构赋值
     let {a,b,c} = {
         a:1,
         b:2,
         c:3
     };//第三种：json对象解构赋值

本质上，后两种通过解构赋值的写法属于”模式匹配“，只要判定了等号两边的模式相同（解构），左边的变量就会被赋予对应的值即赋值。

数组的解构赋值

上面例子第二种就是数组解构赋值，这是刚好完全解构的情况，还有两种不完全解构的情况：

 　　/**
      * 不完全解构的情况
     */
     {
         let [a,b,c] = [1,2];//c的值：undefined
         console.log(a,b,c);//1 2 undefined
     }

     {
         let [a,b] = [1,2,3];//右侧多了一个3
         console.log(a,b);//1,2
     }

     {
         let [,,c] = [1,2,3];//c 3
         console.log(c);//
     }
     /**
      * 由此例子可以看到当左侧的c没有解构成功时（即右侧的数据结构没有与之对应的部分），那么这个变量的值为undefined
      * 那么这个变量的值为undefined，我们知道某个值为undefined的时候存在两种情况：
      * 一种是生命了没有赋值
      * 另一种是显示赋值为undefined
      * **/

 {
         const [d] = [];
         console.log(d);//undefined
         //没有解构成功的变量会被显式赋值为undefined
 }

当数组内部有嵌套时，解构依然能正常进行：

 {//可以嵌套
    let [a,[b,c],d] = [1,[2,3],4];
    console.log(a,b,c,d);
 }

除此之外还允许为解析解构设定默认值，即变量在解构后没有被赋到值（严格来说，应该被赋值为undefined）的情况下允许赋予变量某个默认值：

        let [foo = true] = [];
        console.log(foo);//true

        let [x,y="bbb"] = ["a"];
        console.log(x,y);//a bbb

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

        let [x = 4] = [undefined];//在变量有默认值的时候，只有当解构之后赋的值为undefined时，默认值才会生效，否则默认值会被解构之后的值覆盖。
        console.log(x);//4  

        let [x = {a:12}] = [null];//null是对象，不为空。
        console.log(x);//null

当默认值为表达式时，表达式的求值是惰性的。

 function f(){
   console.log("aaa");
 }
 //let [x] = [1];
 //let [y] = [];
 let [z = f()] = [];
 let [z1 = f()] = [undefined];

 let [a = f()] = [1];

 //console.log(x);//1
 //console.log(y);//undefined
 console.log(z,z1);//aaa aaa undefined undefined  当然如果右侧换成[][undefined]的话，f()执行。
 console.log(a);//1 因为被解构的值是1，所以默认值不会生效，于是f()也就没有必要执行，它也确实没有执行，因为如果执行的话，会打印aaa。
 //当默认值为表达式时，表达式的求值时惰性的。

默认值还可以引用解构赋值的其他变量，但前提是该变量必须已经声明，即被引用变量必须排在引用变量的前面。

         //let [x = 1, y = x] = [];//1 1
         //let [x = 1, y = x] = [2];//2 2 先确定x的值是2
         //let [x = 1, y = x] = [1,2];  //1 2
         let [x = y,y = 1] = [];//ReferenceError引用错误 原因：x用到默认值y的时候，y还没有被声明。

         console.log(x,y);    

对象的解析赋值

赋值规则与数组的解构赋值本质上是一样的，都是解析等号两边的模式，然后将对应位置上的数据关联起来。但与数组不同的是，对象是通过键来区分内部成员的，而非数组里面的位置，所以对象的解构与变量的位置无关。

         // let {a,b} = {
         //     b: 2,
         //     a: 23
         // };
         // console.log(a,b);//23 2

             // let {a, b} = {a:23,b:2};//简写
             // let {a:a, b:b} = {a:23,b:2};//全写
             // console.log(a,b);

             let {a:c, b:d} = {a:23,b:2};
             console.log(c,d); 　　　　　　　 console.log(c,d);//undefined 这里的a，b并非变量，是用来匹配的模式，所以没有定义。

         // let a = 1;
         // let obj = {a};
         // console.log(obj);//{a:1}

         // let a = 1;
         // let obj = {a: a};
         // console.log(obj);//{a:1}

与数组一样，解构也可以用于嵌套解构的对象：

         let obj = {
             p:[
                 "hello",{y:"world"}
             ]
         };

         let {p:[x,{y}]} = obj;
         console.log(x,y);//hello world

字符串的解析赋值

字符串也可以解构赋值，这是因为此时，字符串被转换成了一个类似数组的对象。

         const [a,b,c,d] = "meng";
         console.log(a,b,c,d);//m e n g

         const {length} = "meng";
         console.log(length);//

同时，作为三个基本包装类型之一，字符串还可以调用String对象的一些方法：

let {indexOf} = "meng";
console.log(indexOf === String.prototype.indexOf);//true

可以知道，解构赋值时，如果等号右面时数值、字符串和布尔值三种基本包装类型，则会优先转化为对象。

参数的解析赋值

参数的解构赋值本质数组的解构赋值或者对象的解构赋值。

    　　//函数传参解构：讲一个数组或者对象作为参数传进一个函数，真正能被函数感知的是参数解构之后被赋值的变量。
        function show({a,b}){
            console.log(a,b);
        }
        show({
            a:1,b:2
        });

        //函数传参解构2默认值
        function show2({a,b="默认"}){
            console.log(a,b);
        }
        show2({
            a:1
        });

        //函数传参解构全部默认
        function show3({a="hhdhd",b="默认"}){
            console.log(a,b);
        }
        show3({});

        //函数特性
        function show4({a="hhdhd",b="默认"}={}){
            console.log(a,b);
        }
        show4();

在React无状态组件时：

　　　　ComponentA = (props) => {
            return (
                <div>props.name + props.age</div>
            );
        }

        //改进
        这里props是组件实例化时传入一个包含所有prop的对象,可以解构成：
        ComponentA = ({name,age}) => {
            return (
                <div>name + age</div>
            );
        }
        

默认值情况：

         //{x = 0,y = 0} = {}
         //参数X和Y在解构时的默认值是0，同时设置函数move的的默认参数是{},
         //当什么都没有传给函数move的时候，就等于把{}传给move,
         //此时，x和y有一个默认的解构时候0。当传入函数的值，解构后可以对x和y赋值时，则为x,y为新赋的值。
         function move({x = 0,y = 0} = {}){
             return [x,y];
         }

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

另一个demo:

         //function move({x:0,y:0}) {x,y}= {x:0,y:0}的意思不是单独为x和y赋默认值只能函数的参数赋默认为{x:0,y:0}，意即当什么都没有传入的时候，等于将{x:0,y:0}传给函数。
　　　　　　 //所以当将{}作为参数传入的时候，{x,y}={}解析之后[undefined,undefined]
         function move({x,y} = {x:0,y:0}){
             return [x,y];
         }

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

总之，第一个例子是：对象解构赋值的默认值+函数参数的默认值；

第二个例子，函数参数默认值。