[TOC] ## 變量的結構賦值 ES6允許按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。 ### 數組的解構賦值 只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。 ``` var [a, b, c] = [1, 2, 3] a // 1 b // 2 c // 3 ``` ``` let [x, , y] = [1, 2, 3] x //1 y //3 ``` ``` let [head, ...tail] = [1, 2 ,3, 4] head // 1 tail // [2, 3, 4] ``` ``` let [x, y, ...z] = ['a'] x // 'a' y // undefined z // [] ``` 如果解構不成功，變量值等于undefined。 ``` var [foo] = [] var [bar, foo] = [1] ``` 等號左邊的模式只匹配等號右邊數組的一部分，可以解構成功。 ``` let [a, [b], c] = [1, [2, 3], 4] a // 1 b // 2 c // 4 ``` set解構也能使用。 ``` let [x, y, z] = new Set(['a', 'b', 'c']) x // 'a' ``` 只要某種數據結構有Interator接口，都可以用數組形式的解析賦值。 ``` function* fibs() { var a = 0 var b = 1 while (true) { yield a; [a, b] = [b, a+b] } } var [first, second, third] = fibs() third // 2 ``` fibs 是一個Generator函數，原生就有Interator接口。 #### 默認值 ES6用嚴格等于號（===）判斷一個位置是否有值。如果一個數組成員不嚴格等于undefined，默認值不會生效。 ``` var [foo = true] = [] foo // true ``` ``` [x, y = 'b'] = ['a'] // x = 'a' y = 'b' ``` ``` var [x = 1] = [null] // x = null ``` 如果默認值是一個表達式，那么這個表達式只有在用到時才會去求值。 ``` function f() { console.log(1) } let [x = f()] = [1] //函數f不會執行 ``` 默認值可以引用解構賦值的其他變量，但該變量必須已聲明。 ``` let [x = 1, y = x] = [] // x=1, y=2 let [x = 1, y = x] = [2] // x=2, y=2 let [x = y, y = 1] = [] // ReferenceError ``` ### 變量的解構賦值 ``` var {bar, foo} = { foo:'aaa', bar: 'bbb' } bar // 'bbb' foo // 'aaa' ``` 對象的解構賦值是以下形式的簡寫。其內部機制是先找到同名屬性，再賦值給對應的變量。真正被賦值的是后者。 ``` var {foo: foo, bar: bar} = { foo:'aaa', bar: 'bbb' } var { foo:faz } = { foo:'aaa' } baz // 'aaa' foo // error:foo is not defined ``` 對象的解構可以方便地將現有對象的方法賦值到某個變量。 ``` let {log, sin, cos} = Math ``` ### 字符串的解構賦值 此時字符串被轉換成類似數組的對象 ``` const = [a,b,c] = 'def' a // 'd' b // 'e' c // 'f' ``` 類似數組的對象都有length屬性，因此還可以對這個屬性解構賦值 ``` let {length: len} = 'hello' len // 5 ``` ### 數值和布爾值的解構賦值 解構賦值的規則是，只要等號右邊不是對象，就先轉為對象。 數值和布爾值的包裝函數都有toString方法，因此變量s能取到值。 ``` let {toString: s} = 123 s === Number.prototype.toString // true let {toString: s} = true s === Number.prototype.toString // true ``` 因為undefined和null無法轉為對象，所以對他們進行解構賦值會報錯。 ``` let { prop: x} = undefined //TypeError let { prop: x} = null //TypeError ``` ### 函數參數的解構賦值 ``` function add([x, y]) { return x+y } add([1, 2]) // 3 ``` ``` function move({x = 0, y = 0} = {}) { return [x, y] } move({x: 3, y: 8}) // [3, 8] move({x: 3}) // [3, 0] ``` ### 圓括號問題 編譯器只有解析（不）到等號才知道一個式子是模式還是表達式。 只要有可能，就不要在模式中放圓括號。 #### 不能使用圓括號的情況 變量聲明語句，模式不能使用圓括號 ``` var [(a)] = [1] var { x:(c)} = {} ``` 函數參數中，模式不能帶圓括號 ``` function f([(z)]) = {return z} ``` 不能將整個模式或嵌套模式中的一層放在圓括號 ``` ({p: a}) = {p: 42} ``` #### 可以使用圓括號的情況 可以使用圓括號的情況只有一種：賦值語句的非模式部分可以使用圓括號 ``` [(b)] = [3] ({p: (d)} = {}) [(parseInt.prop)] = [3] ``` ### 用途 #### 交換變量的值 ``` [x, y] = [y, x] ``` #### 獲取函數返回多個值 ``` // 返回一個數組 function getArray() { return [1,2,3] } var [a, b, c = getArray() // 返回一個對象 function getObject() { return { foo: 1, bar: 2 } } var {foo, bar} = getObject() ``` #### 函數參數的定義 解構賦值可以將一組參數與變量名對應起來。 ``` // 參數是一組有次序的值 function f([x,y,z]) {} f([1,2,3]) // 參數是一組無次序的值 function f({x, y, z}) {} f({z:3, y:2, x:1}) ``` #### 提取JSON數據 ``` var jsonData = { id: 2, errorCode: 1, data: [21,32] } let {id, errorCode, data} = jsonData ``` #### 函數參數的默認值 ``` jQuery.ajax = function(url, { async = true, beforeSend = function(){}, cache = true, complete = function() {}, crossDomain = false }) { // .... } ``` 無需在函數內再寫var foo = config.foo \|\| 'default value'這樣的語句 #### 遍歷Map解構 所以部署了Iterator接口的對象，都可以用for..of循環遍歷。Map解構原生提供Iterator接口。 ``` var map = new Map() map.set('first', 'hehe') map.set('second', 'haha') for(let [key, value] of map) { console.log(key + ' is ' + value) } // first is hehe // second is haha ``` ``` //獲取鍵名 for(let [key] of map) {} //獲取鍵值 for(let [, value] of map) {} ``` #### 輸入模塊的指定方法 加載模塊時，往往需要指定輸入哪些方法，解析賦值使得輸入語句非常清晰。 ``` const {SoureceMapConsumer, SourceNode} = require('source-map') ```