ES6中的解構賦值

在解釋什麼是解構賦值前，咱們先來看一下， ES5 中對變量的聲明和賦值。

var str = 'hello word';

左邊一個變量名，右邊能夠是字符串，數組或對象。

ES6 中增長了一種更爲便捷的賦值方式。稱爲 Destructuring 。好像你們廣泛翻譯爲解構。解構賦值容許咱們將數組或對象的屬性賦予給任何變量，該變量的定義語法與數組字面量或對象字面量很類似。舉個例子能夠直觀的說明。

let [speak, name] = ['hello', 'destructuring'];
console.log( speak + ' ' + name ); // hello destructuring

數組的解構賦值

用更加直白的話來描述就是，等號兩邊保持相同的形式（數組對應數組，對象對應對象），則左邊的變量就會被賦予對應的值。若是對應的右邊值缺失，缺失部分變量值爲 undefined ,若是右邊值多餘，依舊可以正常解構。

 

// ES6 中
let arr = [1,2,3,4,5];
let [el1, el2] = [arr];
// 或者
let [el1, el2] = [1,2,3,4,5];
// el1 => 1, el2 => 2 

 

解構賦值也是可嵌套的：

let value = [1, 2, [3, 4, 5]];
let [el1, el2, [el3, el4]] = value;

一樣能夠經過簡單地在指定位置省略變量來忽略數組中的某個元素：

let value = [1, 2, 3, 4, 5];
let [el1, , el3, , el5] = value;

更進一步，默認值一樣也能夠被指定：

let [firstName = "John", lastName = "Doe"] = [];

ES6中，提供了一種將右側多餘的值以數組的形式賦值給左側變量的語法——「rest「模式：

let [head, ...tail] = [1, 2, 3, 4];  
console.log(tail);  // [2, 3, 4]  

 當默認值不存在，變量值就等於 undefined

let [missing] = [];  
console.log(missing);  // undefined 

這裏的數組，指的是部署了 [Iterator](http://www.2ality.com/2015/02/es6-iteration.html) 接口的數據結構。

對象的解構賦值

和數組的用法相相似，一個主要的不一樣點是，對象是無次序排列的，因此變量必須和屬性名相同。

let person = {firstName: "John", lastName: "Doe"};
let {firstName, lastName} = person;

解構另外一個特性是，變量 keys 可使用計算後的屬性名，可是若是你對這容易混淆的話，不建議使用。

let person = {firstName: "John", lastName: "Doe"};
let {firstName: name, lastName} = person;
// `name`變量將會被聲明爲 `person.firstName` 的值

函數參數的解構賦值

函數的參數也能夠解構賦值。

function add({x: 0, y: 0}){
    return x+y;
}
add({1,2}); // 3

null 和 undefined

當嘗試解構 null 和 undefined 的時候會報錯。這是由於使用對象賦值模式時，被解構的值必需可以轉換成一個對象（object）。大多數的類型均可以轉換爲一個對象，但null和undefined卻並不能被轉換。

其它

解構賦值的好處有不少，好比

• 兩個值的交換

• 函數參數默認值

• 函數返回值

• 正則匹配的返回值

• 快速處理 JSON 數據

• 遍歷Map結構ES6 的解構賦值給 JS 的書寫帶來了很大的便利性，同時也提升了代碼的可讀性。可是也須要注意一些問題，避免拔苗助長。

• • 關於圓括號的問題，歡迎翻看阮一峯老師的博客

  • 解構的嵌套儘可能不要太深

  • 函數有多個返回值時，儘可能使用對象解構而不用數組解構，避免出現順序對應問題

  • 已聲明過的變量不能用於解構