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
複製代碼