變量的解構賦值 · ECMAScript 6入門

## 數組的解構賦值 ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。以前，為變量賦值，只能直接指定值。 ~~~ var a = 1; var b = 2; var c = 3; ~~~ ES6允許寫成下面這樣。 ~~~ var [a, b, c] = [1, 2, 3]; ~~~ 上面代碼表示，可以從數組中提取值，按照對應位置，對變量賦值。本質上，這種寫法屬于“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。 ~~~ let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [,,third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] ~~~ 如果解構不成功，變量的值就等于undefined。 ~~~ var [foo] = []; var [foo] = 1; var [foo] = false; var [foo] = NaN; var [bar, foo] = [1]; ~~~ 以上幾種情況都屬于解構不成功，foo的值都會等于undefined。這是因為原始類型的值，會自動轉為對象，比如數值1轉為`new Number(1)`，從而導致foo取到undefined。另一種情況是不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的數組。這種情況下，解構依然可以成功。 ~~~ let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4 ~~~ 上面代碼的兩個例子，都屬于不完全解構，但是可以成功。如果對undefined或null進行解構，會報錯。 ~~~ // 報錯 let [foo] = undefined; let [foo] = null; ~~~ 這是因為解構只能用于數組或對象。其他原始類型的值都可以轉為相應的對象，但是，undefined和null不能轉為對象，因此報錯。解構賦值允許指定默認值。 ~~~ var [foo = true] = []; foo // true [x, y='b'] = ['a'] // x='a', y='b' [x, y='b'] = ['a', undefined] // x='a', y='b' ~~~ 注意，ES6內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等于undefined，默認值是不會生效的。 ~~~ var [x = 1] = [undefined]; x // 1 var [x = 1] = [null]; x // null ~~~ 上面代碼中，如果一個數組成員是null，默認值就不會生效，因為null不嚴格等于undefined。解構賦值不僅適用于var命令，也適用于let和const命令。 ~~~ var [v1, v2, ..., vN ] = array; let [v1, v2, ..., vN ] = array; const [v1, v2, ..., vN ] = array; ~~~ 對于Set結構，也可以使用數組的解構賦值。 ~~~ [a, b, c] = new Set(["a", "b", "c"]) a // "a" ~~~ 事實上，只要某種數據結構具有Iterator接口，都可以采用數組形式的解構賦值。 ~~~ 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(); sixth // 5 ~~~ 上面代碼中，fibs是一個Generator函數，原生具有Iterator接口。解構賦值會依次從這個接口獲取值。 ## 對象的解構賦值解構不僅可以用于數組，還可以用于對象。 ~~~ var { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" ~~~ 對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。 ~~~ var { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" var { baz } = { foo: "aaa", bar: "bbb" }; baz // undefined ~~~ 上面代碼的第一個例子，等號左邊的兩個變量的次序，與等號右邊兩個同名屬性的次序不一致，但是對取值完全沒有影響。第二個例子的變量沒有對應的同名屬性，導致取不到值，最后等于`undefined`。如果變量名與屬性名不一致，必須寫成下面這樣。 ~~~ var { foo: baz } = { foo: "aaa", bar: "bbb" }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world' ~~~ 和數組一樣，解構也可以用于嵌套結構的對象。 ~~~ var obj = { p: [ "Hello", { y: "World" } ] }; var { p: [x, { y }] } = obj; x // "Hello" y // "World" ~~~ 對象的解構也可以指定默認值。 ~~~ var {x = 3} = {}; x // 3 var {x, y = 5} = {x: 1}; console.log(x, y) // 1, 5 var { message: msg = "Something went wrong" } = {}; console.log(msg); // "Something went wrong" ~~~ 默認值生效的條件是，對象的屬性值嚴格等于undefined。 ~~~ var {x = 3} = {x: undefined}; x // 3 var {x = 3} = {x: null}; x // null ~~~ 上面代碼中，如果x屬性等于null，就不嚴格相等于undefined，導致默認值不會生效。如果要將一個已經聲明的變量用于解構賦值，必須非常小心。 ~~~ // 錯誤的寫法 var x; {x} = {x:1}; // SyntaxError: syntax error ~~~ 上面代碼的寫法會報錯，因為JavaScript引擎會將`{x}`理解成一個代碼塊，從而發生語法錯誤。只有不將大括號寫在行首，避免JavaScript將其解釋為代碼塊，才能解決這個問題。 ~~~ // 正確的寫法 ({x} = {x:1}); ~~~ 上面代碼將整個解構賦值語句，放在一個圓括號里面，就可以正確執行。關于圓括號與解構賦值的關系，參見下文。對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量。 ~~~ let { log, sin, cos } = Math; ~~~ 上面代碼將Math對象的對數、正弦、余弦三個方法，賦值到對應的變量上，使用起來就會方便很多。 ## 字符串的解構賦值字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。 ~~~ const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o" ~~~ 類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。 ~~~ let {length : len} = 'hello'; len // 5 ~~~ ## 函數參數的解構賦值函數的參數也可以使用解構。 ~~~ function add([x, y]){ return x + y; } add([1, 2]) // 3 ~~~ 上面代碼中，函數add的參數實際上不是一個數組，而是通過解構得到的變量x和y。函數參數的解構也可以使用默認值。 ~~~ function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0] ~~~ 上面代碼中，函數move的參數是一個對象，通過對這個對象進行解構，得到變量x和y的值。如果解構失敗，x和y等于默認值。注意，指定函數參數的默認值時，不能采用下面的寫法。 ~~~ function move({x, y} = { x: 0, y: 0 }) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, undefined] move({}); // [undefined, undefined] move(); // [0, 0] ~~~ 上面代碼是為函數move的參數指定默認值，而不是為變量x和y指定默認值，所以會得到與前一種寫法不同的結果。 ## 圓括號問題解構賦值雖然很方便，但是解析起來并不容易。對于編譯器來說，一個式子到底是模式，還是表達式，沒有辦法從一開始就知道，必須解析到（或解析不到）等號才能知道。由此帶來的問題是，如果模式中出現圓括號怎么處理。ES6的規則是，只要有可能導致解構的歧義，就不得使用圓括號。但是，這條規則實際上不那么容易辨別，處理起來相當麻煩。因此，建議只要有可能，就不要在模式中放置圓括號。 ### 不能使用圓括號的情況以下三種解構賦值不得使用圓括號。（1）變量聲明語句中，模式不能帶有圓括號。 ~~~ // 全部報錯 var [(a)] = [1]; var { x: (c) } = {}; var { o: ({ p: p }) } = { o: { p: 2 } }; ~~~ 上面三個語句都會報錯，因為它們都是變量聲明語句，模式不能使用圓括號。（2）函數參數中，模式不能帶有圓括號。函數參數也屬于變量聲明，因此不能帶有圓括號。 ~~~ // 報錯 function f([(z)]) { return z; } ~~~ （3）不能將整個模式，或嵌套模式中的一層，放在圓括號之中。 ~~~ // 全部報錯 ({ p: a }) = { p: 42 }; ([a]) = [5]; ~~~ 上面代碼將整個模式放在模式之中，導致報錯。 ~~~ // 報錯 [({ p: a }), { x: c }] = [{}, {}]; ~~~ 上面代碼將嵌套模式的一層，放在圓括號之中，導致報錯。 ### 可以使用圓括號的情況可以使用圓括號的情況只有一種：賦值語句的非模式部分，可以使用圓括號。 ~~~ [(b)] = [3]; // 正確 ({ p: (d) } = {}); // 正確 [(parseInt.prop)] = [3]; // 正確 ~~~ 上面三行語句都可以正確執行，因為首先它們都是賦值語句，而不是聲明語句；其次它們的圓括號都不屬于模式的一部分。第一行語句中，模式是取數組的第一個成員，跟圓括號無關；第二行語句中，模式是p，而不是d；第三行語句與第一行語句的性質一致。 ## 用途變量的解構賦值用途很多。 **（1）交換變量的值** ~~~ [x, y] = [y, x]; ~~~ 上面代碼交換變量x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。 **（2）從函數返回多個值** 函數只能返回一個值，如果要返回多個值，只能將它們放在數組或對象里返回。有了解構賦值，取出這些值就非常方便。 ~~~ // 返回一個數組 function example() { return [1, 2, 3]; } var [a, b, c] = example(); // 返回一個對象 function example() { return { foo: 1, bar: 2 }; } var { foo, bar } = example(); ~~~ **（3）函數參數的定義** 解構賦值可以方便地將一組參數與變量名對應起來。 ~~~ // 參數是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]) // 參數是一組無次序的值 function f({x, y, z}) { ... } f({x:1, y:2, z:3}) ~~~ **（4）提取JSON數據** 解構賦值對提取JSON對象中的數據，尤其有用。 ~~~ var jsonData = { id: 42, status: "OK", data: [867, 5309] } let { id, status, data: number } = jsonData; console.log(id, status, number) // 42, OK, [867, 5309] ~~~ 上面代碼可以快速提取JSON數據的值。 **（5）函數參數的默認值** ~~~ jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config }) { // ... do stuff }; ~~~ 指定參數的默認值，就避免了在函數體內部再寫`var foo = config.foo || 'default foo';`這樣的語句。 **（6）遍歷Map結構** 任何部署了Iterator接口的對象，都可以用for...of循環遍歷。Map結構原生支持Iterator接口，配合變量的解構賦值，獲取鍵名和鍵值就非常方便。 ~~~ var map = new Map(); map.set('first', 'hello'); map.set('second', 'world'); for (let [key, value] of map) { console.log(key + " is " + value); } // first is hello // second is world ~~~ 如果只想獲取鍵名，或者只想獲取鍵值，可以寫成下面這樣。 ~~~ // 獲取鍵名 for (let [key] of map) { // ... } // 獲取鍵值 for (let [,value] of map) { // ... } ~~~ **（7）輸入模塊的指定方法** 加載模塊時，往往需要指定輸入那些方法。解構賦值使得輸入語句非常清晰。 ~~~ const { SourceMapConsumer, SourceNode } = require("source-map"); ~~~