深刻淺出ES6（六）：解構 Destructuring

做者 Jason Orendorff  github主頁  https://github.com/jorendorff

 

什麼是解構賦值？

解構賦值容許你使用相似數組或對象字面量的語法將數組和對象的屬性賦給各類變量。這種賦值語法極度簡潔，同時還比傳統的屬性訪問方法更爲清晰。

一般來講，你極可能這樣訪問數組中的前三個元素：

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

若是使用解構賦值的特性，將會使等效的代碼變得更加簡潔而且可讀性更高：

    var [first, second, third] = someArray;

SpiderMonkey（Firefox的JavaScript引擎）已經支持解構的大部分功能，可是仍不健全。你能夠經過bug 694100跟蹤解構和其它ES6特性在SpiderMonkey中的支持狀況。

 

數組與迭代器的解構

以上是數組解構賦值的一個簡單示例，其語法的通常形式爲：

 [ 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。因此咱們能夠確定，漸漸地，你會在天天使用的語言中加入解構這個新特性，它可讓你的代碼變得更加精簡整潔。

在第一篇文章中，我說過ES6極可能改變你寫JavaScript的方式。這正是我日思夜想的特性：輕鬆學習，簡單改進，協力出擊，優化項目，在不斷的進化中改革這門語言。

感謝團隊對於整個ES6解構特性的努力，特別感謝Tooru Fujisawa（arai）和Arpad Borsos（Swatinem）的出色貢獻。

Chrome中有關解構的支持正在開發中，其它瀏覽器也將適時增長支持。如今，若是你想在Web上使用解構功能，你須要使用Babel或Traceur將ES6代碼轉譯爲相應的ES5代碼。

---

再次感謝Nick Fitzgerald撰寫ES6的解構特性。