【探祕ES6】系列專欄（六）：解構賦值

ES6做爲新一代JavaScript標準，已正式與廣大前端開發者見面。爲了讓你們對ES6的諸多新特性有更深刻的瞭解，Mozilla Web開發者博客推出了《ES6 In Depth》系列文章。CSDN已獲受權，將持續對該系列進行翻譯，組織成【探祕ES6】系列專欄，供你們學習借鑑。本文爲該系列的第六篇。  

什麼是解構賦值？

解構賦值可將數組的元素或對象的屬性賦予給另外一個變量，該變量的定義語法與數組字面量或對象字面量很類似。此語法很是簡潔，相比於傳統的屬性訪問方式，更加直觀清晰。

在不使用解構賦值的狀況下，一般咱們這樣訪問數組中的元素：

var first = someArray[0];  
var second = someArray[1];  
var third = someArray[2];

使用解構賦值後，代碼獲得了極大的簡化，同時可讀性也更強：

var [first, second, third] = someArray;

除了個別特性，解構賦值的大部分特性在SpiderMonkey（Firefox的JavaScript引擎）中都已獲得支持，詳見 bug 694100。

解構數組與其可迭代性

上面的例子爲咱們展現瞭解構賦值在數組中的運用，其基本語法形式爲：

[ variable1, variable2, ..., variableN ] = array;

這只是將變量1到變量N分配到數組相應的元素中。固然，若是想在同一時間對變量進行聲明，能夠在賦值前增長相應的關鍵字：var，let或const：

var [ variable1, variable2, ..., variableN ] = array;  
let [ variable1, variable2, ..., variableN ] = array;  
const [ variable1, variable2, ..., variableN ] = array;

事實上，變量一詞用的並不許確，由於解構賦值一樣能夠用於數組嵌套的狀況（注意：左右兩側的格式應保持一致）：

var [foo, [[bar], baz]] = [1, [[2], 3]];  
console.log(foo);  
// 1  
console.log(bar);  
// 2  
console.log(baz);  
// 3

此外，左側的變量列表還能夠一種包含連續逗號的形式跳過右側對應的值：

var [,,third] = ["foo", "bar", "baz"];  
console.log(third);  
// "baz"

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

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

不管是訪問數組外仍是數組中不存在的元素，都會獲得相同的結果：undifined：

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

注意，數組賦值模式的解構賦值，一樣也可迭代：

function* fibs() {  
  var a = 0;  
  var b = 1;  
  while (true) {  
    yield a;  
    [a, b] = [b, a + b];  
  }  
}  
  
var [first, second, third, fourth, fifth, sixth] = fibs();  
console.log(sixth);  
// 5

解構對象

在對象中使用解構賦值，容許你爲對象的不一樣屬性綁定變量名。這種狀況下，解構賦值的左側部分相似一個對象字面量，對象中是一個名值對的列表，屬性名稱位於名值對內冒號左側，變量名稱位於名值對內冒號右側，每個屬性都會去右側對象中查找相應的賦值，每個值都會賦值給它對應的變量：

var robotA = { name: "Bender" };  
var robotB = { name: "Flexo" };  
  
var { name: nameA } = robotA;  
var { name: nameB } = robotB;  
  
console.log(nameA);  
// "Bender"  
console.log(nameB);  
// "Flexo"

當屬性名稱和變量名稱相同時，可以下簡寫：

var { foo, bar } = { foo: "lorem", bar: "ipsum" };  
console.log(foo);  
// "lorem"  
console.log(bar);  
// "ipsum"

就像嵌套數組可用於解構賦值同樣，嵌套對象也可用於解構賦值，而且兩種語法還能夠結合在一塊兒使用：

var complicatedObj = {  
  arrayProp: [  
    "Zapp",  
    { second: "Brannigan" }  
  ]  
};  
  
var { arrayProp: [first, { second }] } = complicatedObj;  
  
console.log(first);  
// "Zapp"  
console.log(second);  
// "Brannigan"

使用解構賦值訪問對象中未定義的屬性，將會獲得undifined：

var { missing } = {};  
console.log(missing);  
// undefined

爲對象的屬性命名，但未對其聲明（缺乏var、const或let關鍵字），會拋出一個語法錯誤：

{ blowUp } = { blowUp: 10 };  
// Syntax error

這是由於，JavaScript的語法規定引擎對語句進行解析，需以塊語句爲開頭（例如，{console}即是一個有效的塊語句）。解決的辦法是將整個表達式包裹在一對括號中：

({ safe } = {});  
// No errors

非對象、數組、迭代的解構類型

當咱們嘗試對null或undefined使用解構賦值時，將會拋出一個類型錯誤：

var {blowUp} = null;  
// TypeError: null has no properties

可是，對於其餘原始類型如：布爾量，數字或字符串等則能夠運用解構賦值，並獲得undifined：

var {wtf} = NaN;  
console.log(wtf);  
// undefined

對於這種狀況，你可能會感到很意外。但緣由其實很簡單，這是由於使用對象賦值模式時，被解構的值必需可以轉換成一個對象（object）。大多數的類型均可以轉換爲一個對象，但null和undefined卻並不能被轉換。當使用數組賦值模式時，其值必須有一個迭代器。

默認值

對於值和屬性未定義的數組與對象，你仍能夠運用解構賦值的方式爲其設定默認值：

var [missing = true] = [];  
console.log(missing);  
// true  
  
var { message: msg = "Something went wrong" } = {};  
console.log(msg);  
// "Something went wrong"  
  
var { x = 3 } = {};  
console.log(x);  
// 3

（編者注：此功能在Firefox上目前只實現了前兩種狀況，而第三種並未實現。見bug932080。）

解構的實際應用

函數參數定義

做爲開發人員，咱們常常把一個對象用做函數的參數。這個對象具備不少的屬性，以便暴露出更多便於咱們使用的API，從而無需迫使咱們的開發者去記住大量獨立參數的順序。咱們對參數對象使用解構賦值，這樣，在訪問對象屬性時，即可以免重複調用這一參數對象，示例代碼以下：

function removeBreakpoint({ url, line, column }) {  
  // ...  
}

這是來自Firefox開發工具JavaScript調試器（在JavaScript中執行）中的代碼簡化片段。咱們發現這種模式是極好的。

配置對象參數

對前面的例子進行擴展，若咱們正在對對象的屬性進行解構賦值，那麼咱們仍舊能夠爲其賦予默認值。這是十分有用的，尤爲是當咱們打算配置對象或是對象的屬性已經有了合理的默認值。例如，jQuery中的AJAX函數須要一個配置對象做爲其第二參數，能夠改寫以下：

jQuery.ajax = function (url, {  
  async = true,  
  beforeSend = noop,  
  cache = true,  
  complete = noop,  
  crossDomain = false,  
  global = true,  
  // ... more config  
}) {  
  // ... do stuff  
};

這樣就避免了爲配置對象中的每一個屬性重複：var foo = config.foo || theDefaultFoo（編者注：不幸的是，在Firefox中，對象簡寫語法中的默認值仍舊不可以使用，詳情見bug932080的最新更新。）

ES6迭代協議

ECMAScript6中還定義了一項迭代的協議，在這個系列的前面咱們已經談到過。當你遍歷 Maps（一個ES6非標準庫），會獲得一系列的[key，value]。咱們能夠對這些[key，value]運用解構的方式，從而方便地訪問它們：

var map = new Map();  
map.set(window, "the global");  
map.set(document, "the document");  
  
for (var [key, value] of map) {  
  console.log(key + " is " + value);  
}  
// "[object Window] is the global"  
// "[object HTMLDocument] is the document"

只遍歷key：

for (var [key] of map) {  
  // ...  
}

或只遍歷value：

for (var [,value] of map) {  
  // ...  
}

多返回值

你能夠經過數組的形式返回多個值，並對其解構賦值：

function returnMultipleValues() {  
  return [1, 2];  
}  
var [foo, bar] = returnMultipleValues();

或者，返回的值爲一個對象，用解構賦值的方式對其進行命名：

function returnMultipleValues() {  
  return {  
    foo: 1,  
    bar: 2  
  };  
}  
var { foo, bar } = returnMultipleValues();

與上面兩種模式相比，下面這種模式就顯得過於繁瑣：

function returnMultipleValues() {  
  return {  
    foo: 1,  
    bar: 2  
  };  
}  
var temp = returnMultipleValues();  
var foo = temp.foo;  
var bar = temp.bar;

或着使用連續風格的傳遞（continuation passing style）：

function returnMultipleValues(k) {  
  k(1, 2);  
}  
returnMultipleValues((foo, bar) => ...);

從CommonJS的模塊中導入接口名

不使用ES6模塊了嗎？仍使用CommonJS的模塊？沒問題！當導入一些CommonJS的模塊時，很是常見的狀況是模塊的接口功能比你實際需求的多許多。經過解構的方式，你能夠明確你須要的那部分，而且能夠防止多餘的接口名污染你的命名空間：

const { SourceMapConsumer, SourceNode } = require("source-map");

（若是你使用ES6模塊，你應當知道相似的語法可用於聲明導入。）

結語

因此，就如你所看到的那樣，在不少獨立細小的方面，解構賦值都很是有用。在Mozilla，關於它的使用咱們積累了大量的經驗。十年前Lars Hansen將JS的解構賦值模式引入Opera，隨後Brendan Eich將他引入Firefox。並在Firefox2中得以應用。

以前，咱們說ES6將會改變你寫JavaScript的方式。將這些新的特性和微小的改進結合起來，它終將會影響你工做中的每個項目。這是一場以進化的方式發起的革命。

固然，這是團隊努力取得的成果。在這裏，特別感謝Tooru Fujisawa (arai)和Arpad Borsos (Swatinem)做出的傑出貢獻。關於瀏覽器的支持方面，Chrome對解構的支持正在開發中，無疑其餘瀏覽器會及時支持。至於如今，若是你想在Web上使用解構，則須要使用 Babel或 Traceur。

原文連接：ES6 In Depth: Destructuring

本譯文遵循Creative Commons Attribution Share-Alike License v3.0