JS對象解構

什麼是解構賦值？

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

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

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