es6语法-解构赋值

左边一种结构、右边一种结构，左右进行一一对应赋值。
左右都是数组☞数组解构赋值；
左右都是对象☞对象解构赋值；
……
解构赋值的分类：数组解构赋值、对象解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值。

数组解构赋值

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

输出结果：1 2

数组解构赋值的默认值：

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

输出结果：1 2 3

若不给c赋值，即c没有默认值，如下

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

输出结果： 1 2 undefined

备注：若解构赋值未在解构上成功配对，如上的c没有找到与之配对的值，即为undefined。默认值就是用来解决这种问题的，即如上给其赋值为c=3。

使用场景：

1、变量的交换

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

输出结果：2 1

之前的变量替换(ES5中)需借助一个中间变量做存储。

2、

{    function f(){        return [1,2];    }    let a,b;    [a,b] = f();    console.log(a,b);}   

输出结果：1 2

原来的做法：先给一个变量接收函数运行的结果，然后按索引返回0，1这2个位置才能取到这个值。

3、当返回多个值的情况下，可选择性地接收某2个变量或某几个变量

{    function f(){        return [1,2,3,4,5];    }    let a,b,c;    [a,,,b] = f();    console.log(a,b);}   

输出结果：1 4

4、不确定函数返回的数组长度是多少，我只关心第1个，其余的返回数组即可，想用就去遍历，不想用就放着

{    function f(){        return [1,2,3,4,5];    }    let a,b,c;    [a,...b] = f();    console.log(a,b);}   

输出结果：1 [2, 3, 4, 5]

a是1，b是[2,3,4,5]

3、4场景可混合使用：

{    function f(){        return [1,2,3,4,5];    }    let a,b,c;    [a,,...b] = f();    console.log(a,b);}   

输出结果：1 [3, 4, 5]

对象的解构赋值

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

输出结果：1 2

{    let d = {p:33,q:true};    {p,q} = d;    console.log(p,q);}   

输出结果：33 true

对象解构赋值的左侧一定是对象格式，右侧也是，它是按key-value的形式去匹配的。

对象的默认值

{    let {a=10,b=5} = {a:3};    console.log(a,b);}

输出结果：3 5

a的默认值是10，之后对其重新赋值为3；b默认值为5，之后未对其赋值。

嵌套对象和数组的应用

{    let mData = {        title:'abc',        test:[{            title:'name',            desc:'description'        }]    }    let {title:esTitle,test:[{title:cnTitle}]}=mData;    console.log(esTitle,cnTitle);}   

输出结果：abc name