2017年1月15日

[筆記] JavaScript ES6 中的陣列解構賦值（array destructuring）

在 ES6 中過去的陣列和物件可以透過解構（destructuring）的方式來賦值。這篇文章中，我們會先說明如何透過陣列的方式來賦值。

陣列解構賦值的方法（array destructuring）

過去陣列內的元素在賦值的時候，只能透過直接給值的方式，像是下面這樣：

let numbers = [1, 2, 3];
let a = numbers[0];
let b = numbers[1];
let c = numbers[2];
console.log(a,b,c);   // 1, 2, 3

然而在 ES6 中可以直接透過解構的方式賦值，像是下面這樣子：

let [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1, 2, 3

如此變數 a = 1, b = 2, c = 3，這是最基本的陣列解構賦值方式。

當變數的數量多於賦予的值時，多出來的那個變數會被賦予 undefined 的值（d = undefined）：

// 當變數多於所給的值
let [a, b, c, d] = [1, 2, 3];
console.log(a, b, c, d); // 1, 2, 3, undefined

當輸入的變數少於所給的值的時候，只有被指定到的變數會有值，少掉的變數可以直接空過去，這時候 g = 1, i = 3：

// 當變數少於給的值
let [g, , i] = [1,2,3];
console.log(g, i);  // 1, 3

我們也可以在陣列解構中賦予預設值，像是下面這樣：

let [a, b, c = 4, d = 'Hello'] = [1, 2, 3];
console.log(a, b, c, d); // 1, 2, 3, "Hello"

如此就可以將變數 c 賦予 4，d 賦予 Hello 的預設值，輸出的結果 c 因為後面有給值，所以依然是 3 ，而 d 在後面沒有給值，就直接帶入了預設值，得到 “Hello"。

如果你使用的是 standardJS 當作你的 code style，那麼你應該很習慣在結尾不加分號，但是在使用陣列的結構賦值時，這麼做有可能會噴錯誤。

例如這樣：

let x = 0
let y = 0
console.log(x, y)
[x, y] = [1, 2]
console.log(x, y)

這時候會得到 "TypeError: Cannot set property '0' of undefined 的錯誤。首先簡單說明一下之所以可以不用在結尾加分號是因為在多數情況下，

在語句或一段代碼敘述後，加了Enter鍵(\n)後，JS剖析器會在執行期間自動幫你插入分號 @ eddyChang

上面提到是多數情況，但是在某些情況下 JS 引擎是不會幫你加上分號的，其中像是這裡的開頭以 [ 開頭的語句。因此在這裡，請記得在 [ 的前面加上分號，寫起來會像是這樣 ;[x, y] = [1, 2]。