PJCHENder 未整理筆記

[JS] ES6 中的陣列解構賦值(array destructuring)

2017-09-26

[JS] ES6 中的陣列解構賦值(array destructuring)

@([Udemy] Accelerated JavaScript ES6 Training)[es6, javaScript, udemy]

img

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

陣列解構賦值的方法(array destructuring)

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

1
2
3
4
5
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 中可以直接透過解構的方式賦值,像是下面這樣子:

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

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

當輸入的變數多於所給的值

當變數的數量多於賦予的值時,多出來的那個變數會被賦予 undefined 的值(d = undefined):

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

當輸入的變數少於所給的值

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

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

在陣列解構中賦予預設值

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

1
2
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,那麼你應該很習慣在結尾不加分號,但是在使用陣列的結構賦值時,這麼做++有可能++會噴錯誤。

例如這樣:

1
2
3
4
5
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]

更多關於分號的使用請參考 JavaScript裡的語句用分號結尾是個選項嗎 @ eddyChang

資料來源

掃描二維條碼,分享此文章