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
// 这段代码表示，能够从数组中提取值，按照对应位置对 变量赋值。
复制代码

二、嵌套数组进行解构

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 对应的值有一个或者多个，就会自动组合成一个数组，而且数组的内容是其位置对应的数组长度。

三、匹配失败的状况

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

2、对象的解构赋值

解构不只仅用于数组，还能够用于对象

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

3、字符串的解构赋值

字符串也能够解构赋值，由于字符串被转换成一个相似数组的对象

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

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

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

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

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

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

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

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

6、适用场景

一、变量交换

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

二、变量赋值

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

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

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

四、先后端通讯，json对象

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