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