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