深入ES6 三解構賦值

解構賦值指的是按照一定規則，直接從陣列和物件中提取值，對變數進行賦值。這章主要包括：

陣列的解構賦值

物件的解構賦值

巢狀與匹配模式

應用

解構賦值的本質是模式匹配，只要左右兩邊的模式相同，左邊的變數就會被賦予對應的值。如果解構不成功，則返回undefined。

let [d,b,c] = [1,2,3]; // => d=1;b=2;c=3
let [[f]] = [[1]]; // =>f=1
let [e,...tail] = [1,2,3,4]; // =>e=1;tail = [2,3,4]

這裡let [a, b, c]表示定義了用於陣列解構的三個變數a, b, c。解構採取貪婪匹配原則，盡量解構更多的資料，並且即使模式不是完全匹配，也能部分解構成功。上面的rest（…）運算子會收錄匹配到的其餘資料進乙個陣列，但其必須出現在末尾，否則會報錯。

注意：採用結構賦值的寫法，變數的宣告和賦值是一體的，對於let和const而言，變數不得重新宣告，否則會報錯。

let [a, b, c] = [1, 2, 3];
let a = 10; // 報錯，因為a已經宣告過了

再介紹乙個乍一眼看上去容易出錯的例子：

let [a, [b], c] = [1, [2, 3], 4]; // b=>2
// 如果想讓b的值解構後為[2,3]，需要寫成
let [a,[...b],c] = [1, [2, 3], 4];
// 或者最簡單的
let [a, b, c] = [1,[2,3],4]

在進行對陣列的解構賦值時，等號右邊必須是可遍歷的解構，比如說陣列，set集合，甚至generator物件（會在面的章節介紹）。否則會報錯。

字串在解構時會被轉化成乙個類似陣列的物件，因此可以用於陣列的解構賦值

let [a, b, c] = 'hello' // => a=h; b=e; c=l

字串擁有length屬性，我們也可以使用物件的解構賦值來獲得之，此時字串hello會被包裝成乙個物件：

let  = 'hello'

可以指定解構賦值時的預設值，當右值陣列成員嚴格等於undefined時，預設值才會生效。

let [a = 'hello'] = ; //a='hello'
let [a = 'hello'] = [null]; //a=null

如果預設值是表示式，它的求值方式是惰性的，只有需要使用預設值的時候，才進行計算

let foo = () => ;
let [b = foo()] = ; // 會執行foo函式
let [b = foo()] = ['bar']; // 不會執行foo函式

預設值也可以引用解構變數的其它值，但引用的值必須在引用之前被宣告

let [x, y = x] = [1]

let  = ;
c //=> 'c'
d // => 'd'

與陣列解構的乙個不同之處在於物件解構把換成了{},let定義了兩個全域性變數：c和d。此外，物件解構賦值是和物件屬性的定義順序無關的，只要名稱能夠匹配，即左邊的變數名與右邊的屬性名相同，就可以取得正確的值。為了告訴你們這點，我特意把e安排到了d前面。

很多時候我們不希望我們的區域性變數名和屬性名完全相同，那麼可以採取下面的辦法：

let  = ; // => baz=foo

格式是：

也就是說只需要在屬性名後面加」:希望的變數名」就可以了。

那麼，你肯定能夠想到，我們開始時寫的這種形式：

let  = ;

其實是下面形式的簡寫，因為它們的屬性名和變數名是相同的。真正被賦值的其實是後者：

let  = ;

如果乙個已經宣告的變數進行解構賦值，大概會像下面這樣：

let foo;
= // 報錯

這是因為大括號寫在了首行，js引擎會把它當成乙個**塊，解決辦法很簡單，加上()就可以了：

( = )

注意，除了這裡以及函式表示式呼叫的時候可能要用到()，我們使用解構賦值的時候盡量不要使用()，因為它幾乎沒有用處，還容易導致各種錯誤出現

前面提到過的

let  =

在進行解構賦值時，實際上是先通過左邊的foo,bar屬性名去到右邊匹配屬性，然後把匹配到的屬性的值賦給左邊的:後的變數名。那麼你就不難想到，物件解構可以像下面這樣設定預設值：

let  =

上面的**foo代表屬性名和變數名相同的情況，baz代表不同的情況。

使用物件解構賦值時，右值可以是簡單資料型別布林、字串或者數字。解構時，會先將其轉化為物件，再進行解構。

右值不得是不能轉成物件的null或undefined，因為它們沒有對應的包裝類。

如果在解構模式中左值是物件巢狀物件的形式，且外部物件屬性沒有正確匹配，則在匹配該物件的內部屬性時將會報錯：

var } =

上面的**中，等號左邊物件的foo屬性無法正確匹配，所以值為undefined。當繼續匹配其中的bar屬性時，就會報錯，因為我們不能從undefined中取子屬性。

解構賦值本身非常靈活，所以可以進行匹配模式的巢狀：

let ]} = ]};
console.log(x); // =>1
console.log(prop); // =>2
console.log(arr); // 報錯，未定義

上面**中的arr是匹配模式的一部分，所以不會被賦值。

這裡舉幾個解構賦值非常常見的應用：

[foo,bar] = [bar,foo];

var foo = ([x, y])=>x+y;
foo([1,2]) // =>3

或者以物件的形式，這樣可以優化以配置物件形式編寫函式引數方式的**

var bar = () => x-y+z
bar() // => 4

但需要注意的是，不要把解構賦值預設引數與es6函式本身預設引數的特性相混淆。

深入ES6 三 解構賦值