什麼是解構賦值？

解構賦值允許你使用類似陣列或物件字面量的語法將陣列和物件的屬性賦給各種變數。這種賦值語法極度簡潔，同時還比傳統的屬性訪問方法更為清晰。

通常來說，你很可能這樣訪問陣列中的前三個元素：

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

如果使用解構賦值的特性，將會使等效的程式碼變得更加簡潔並且可讀性更高：

    var [first, second, third] = someArray;

SpiderMonkey（Firefox的JavaScript引擎）已經支援解構的大部分功能，但是仍不健全。你可以通過

陣列與迭代器的解構

以上是陣列解構賦值的一個簡單示例，其語法的一般形式為：

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

這將為variable1到variableN的變數賦予陣列中相應元素項的值。如果你想在賦值的同時宣告變數，可在賦值語句前加入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"

而且你還可以通過“不定引數”模式捕獲陣列中的所有尾隨元素：

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

當訪問空陣列或越界訪問陣列時，對其解構與對其索引的行為一致，最終得到的結果都是：undefined。

    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"

當你解構一個未定義的屬性時，得到的值為undefined：

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

請注意，當你解構物件並賦值給變數時，如果你已經宣告或不打算宣告這些變數（亦即賦值語句前沒有let、const或var關鍵字），你應該注意這樣一個潛在的語法錯誤：

    { blowUp } = { blowUp: 10 };
    // Syntax error 語法錯誤

為什麼會出錯？這是因為JavaScript語法通知解析引擎將任何以{開始的語句解析為一個塊語句（例如，{console}是一個合法塊語句）。解決方案是將整個表示式用一對小括號包裹：

    ({ safe } = {});
    // No errors 沒有語法錯誤

解構值不是物件、陣列或迭代器

當你嘗試解構null或undefined時，你會得到一個型別錯誤：

    var {blowUp} = null;
    // TypeError: null has no properties（null沒有屬性）

然而，你可以解構其它原始型別，例如：布林值、數值、字串，但是你將得到undefined：

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

你可能對此感到意外，但經過進一步審查你就會發現，原因其實非常簡單。當使用物件賦值模式時，被解構的值需要被強制轉換為物件。大多數型別都可以被轉換為物件，但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目前只實現了這個特性的前兩種情況，第三種尚未實現。詳情檢視bug 932080。)

解構的實際應用

函式引數定義

作 為開發者，我們需要實現設計良好的API，通常的做法是為函式為函式設計一個物件作為引數，然後將不同的實際引數作為物件屬性，以避免讓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,
      // ... 更多配置
    }) {
      // ... do stuff
    };

如此一來，我們可以避免對配置物件的每個屬性都重複var foo = config.foo || theDefaultFoo;這樣的操作。

（編者按：不幸的是，物件的預設值簡寫語法仍未在Firefox中實現，我知道，上一個編者按後的幾個段落講解的就是這個特性。點選bug 932080檢視最新詳情。）

與ES6迭代器協議協同使用

ECMAScript 6中定義了一個迭代器協議，我們在《深入淺出ES6（二）：迭代器和for-of迴圈》中已經詳細解析過。當你迭代Maps（ES6標準庫中新加入的一種物件）後，你可以得到一系列形如[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"

只遍歷鍵：

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

或只遍歷值：

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

多重返回值

JavaScript語言中尚未整合多重返回值的特性，但是無須多此一舉，因為你自己就可以返回一個數組並將結果解構：

    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;

或者使用CPS變換：

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

使用解構匯入部分CommonJS模組

你是否尚未使用ES6模組？還用著CommonJS的模組呢吧！沒問題，當我們匯入CommonJS模組X時，很可能在模組X中匯出了許多你根本沒打算用的函式。通過解構，你可以顯式定義模組的一部分來拆分使用，同時還不會汙染你的名稱空間：

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

（如果你使用ES6模組，你一定知道在import宣告中有一個相似的語法。）

文後盤點

所以，正如你所見，解構在許多獨立小場景中非常實用。在Mozilla我們已經積累了許多有關解構的使用經驗。十年前，Lars Hansen在Opera中引入了JS解構特性，Brendan Eich隨後就給Firefox也增加了相應的支援，移植時版本為Firefox 2。所以我們可以肯定，漸漸地，你會在每天使用的語言中加入解構這個新特性，它可以讓你的程式碼變得更加精簡整潔。