（六）：解構 Destructuring · 深入淺出ES6

> 原文出處：http://www.infoq.com/cn/articles/es6-in-depth-destructuring > 譯者按：Firefox開發者工具工程師[Nick Fitzgerald](http://fitzgeraldnick.com/)最初在他的博客上發布了一篇文章——《[ES6中的解構賦值](http://fitzgeraldnick.com/weblog/50/)》，本文基于這篇博文做了些許補充。 [TOC] ## 什么是解構賦值？解構賦值允許你使用類似數組或對象字面量的語法將數組和對象的屬性賦給各種變量。這種賦值語法極度簡潔，同時還比傳統的屬性訪問方法更為清晰。通常來說，你很可能這樣訪問數組中的前三個元素： ~~~ var first = someArray[0]; var second = someArray[1]; var third = someArray[2]; ~~~ 如果使用解構賦值的特性，將會使等效的代碼變得更加簡潔并且可讀性更高： ~~~ var [first, second, third] = someArray; ~~~ SpiderMonkey（Firefox的JavaScript引擎）已經支持解構的大部分功能，但是仍不健全。你可以通過[bug 694100](https://bugzilla.mozilla.org/show_bug.cgi?id=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" ~~~ 而且你還可以通過“[不定參數](http://www.infoq.com/cn/articles/es6-in-depth-rest-parameters-and-defaults)”模式捕獲數組中的所有尾隨元素： ~~~ 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 ~~~ 你可能對此感到意外，但經過進一步審查你就會發現，原因其實非常簡單。當使用對象賦值模式時，被解構的值[需要被強制轉換為對象](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-requireobjectcoercible)。大多數類型都可以被轉換為對象，但`null`和`undefined`卻無法進行轉換。當使用數組賦值模式時，被解構的值一定要[包含一個迭代器](https://people.mozilla.org/~jorendorff/es6-draft.html#sec-getiterator)。 ## 默認值當你要解構的屬性未定義時你可以提供一個默認值： ~~~ 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](https://bugzilla.mozilla.org/show_bug.cgi?id=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](https://bugzilla.mozilla.org/show_bug.cgi?id=932080)查看最新詳情。） ### 與ES6迭代器協議協同使用 ECMAScript 6中定義了一個[迭代器協議](https://hacks.mozilla.org/2015/04/es6-in-depth-iterators-and-the-for-of-loop/)，我們在《[深入淺出ES6（二）：迭代器和for-of循環](http://www.infoq.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop)》中已經詳細解析過。當你迭代[Maps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map)（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](http://babeljs.io/)或[Traceur](https://github.com/google/traceur-compiler#what-is-traceur)將ES6代碼轉譯為相應的ES5代碼。 * * * 再次感謝Nick Fitzgerald撰寫ES6的解構特性。下一次，我們將講解一個新特性，函數一直以來都是JavaScript語言的基礎構建單元，如果我們用稍短的方式實現函數是否令你感到激動？我自信地預測你的答案一定是yes！不過別輕易相信我說的話，發布下一篇文章時記得親自來看看，我們一起深入淺出ES6箭頭函數（Arrow Function）。