ES6--变量的解构赋值

解构赋值的概念：

在ES6中，是允许按照一定的模式从数组和对象中提取值，然后对变量进行赋值，本质上是“模式匹配”,只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于undefined

一、数组的解构赋值

1、基本用法

一般的变量赋值：

let a = 1;
let b = 2;
var a = 3;
复制代码

es6的变量赋值可以这样写：

let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1,2,3
// 这段代码表示，可以从数组中提取值，按照对应位置对 变量赋值。
复制代码

2、嵌套数组进行解构

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

let a,b,test;
[a,b,...test] = [1,2,3,4,5,6];
console.log(a,b,test); // 1 2 [3,4,5,6]
复制代码

...test 这样的格式，可以看到最后输出的test值是一个数组，所以可以得到一个结论，如果解构赋值时，…test 对应的值有一个或者多个，就会自动组合成一个数组，并且数组的内容是其位置对应的数组长度。

3、匹配失败的情况

let a,b,c,rest;
[a,b,c] = [1,2]; //没有成功配对，c就为undefined
console.log(a,b,c); //1 2 undefined
复制代码

二、对象的解构赋值

解构不仅仅用于数组，还可以用于对象

let a,b;
({a,b} = {a:1,b:2});
console.log(a,b); //1 2
复制代码

对象的解构与数组又一个重要的不同，数组的元素是按次序排列的，变量的取值都是由他的位置决定的，而对象属性没有次序，变量必须与属性同名才能取到正确的值。

let {a,b} = {a:'111', b:'222'}
console.log(a,b) // '111','222'
let {a} = {a:'111',b: '222'}
console.log(a) //undefined
复制代码

等号左边的两个变量次序与等号右边两个同名的属性的次序不一致，但是对取值没有完全影响，第二个例子变量没有对应同名属性值，导致取不到，最后等于undefined

三、字符串的解构赋值

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

const [a,b,c,d] = 'haha'
console.log(a,b,c) // 'h''a''h''a'
// 类似数组的对象由一个length属性，因此还可以对这个属性进行解构复制
复制代码

四、数值和布尔值的解构赋值

解构赋值时，如果等号右边是数值和布尔值，则会先转成对象

let {toString: s} = 123
s === Number.prototype.toString  
// true
复制代码

数值和布尔值的包装对象都有toString属性，因此变量s都能取到值

五、解构赋值中圆括号问题

let [(a)] = [1];
let {(b):c} = {b:2};
let {d:(e)} = {d:2};    //都报错：SyntaxError
复制代码

以上出现错误的原因都是： 1、它们都是申明语句； 2、圆括号中的都属于模式中的一部分。要同时不满足以上两个条件是比较困难的，所以，ES6规定，只要可能导致解构歧义就不得使用圆括号。所以，建议在写的过程中除了上面的那个对象圆括号的例子可以使用外，其他的情况都不能使用。

六、适用场景

1、变量交换

let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b); // 2 1
复制代码

2、变量赋值

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

3、返回多个值的情况下，选择性的去接受一个或者多个变量

function f(){
    return [1,2,3,4,5]
}
let a,b;
[a,,,b] = f();
console.log(a,b); //1 4
复制代码

4、前后端通信，json对象

let metaData = {
    title: 'abc',
    test: [{
        title: 'test',
        desc: 'description'
    }]
}
let {title: esTitle, test:[{title:cnTitle}]} = metaData;
console.log(esTitle,cnTitle); // abc  test
复制代码