前言

上一篇介紹了物件的 destructuring assignment，使得存取物件屬性的語法更加簡潔，而除了物件之外，陣列也同樣可以使用 destructuring assignment，讓我們來看看吧！

傳統取得陣列元素的方法

相信大家應該都很熟悉從陣列中取得元素的方法，那就是透過 index，也就是元素在陣列中的位置，例如：

const scores = [100, 96, 87]

const english = scores[0];  // 100
const chinese = scores[1];  // 96
const math = scores[2];     // 87

以上例子中，透過 陣列名稱[元素位置] 來取得陣列元素，一次只能取得一個元素並且指派給一個變數。

destructuring assignment(解構賦值)

若改用 destructuring assignment 可以透過 const [變數名稱1, 變數名稱2, ...] = 陣列名稱 來一次取得多個元素，若變數名稱對應在該陣列中的位置有值，即可取得該元素：

const scores = [100, 96, 87]

const [english, chinese, math] = scores;  
// english 為 100
// chinese 為 96
// math 為 87

解構賦值並且設定預設值

若使用 destructuring assignment 時，變數對應在陣列中的位置的元素不存在，則可以透過 const [變數名稱1 = 預設值1, 變數名稱2 = 預設值2, ...] = 陣列名稱 給它一個預設值：

const scores = [100]

const [english = 60, chinese = 60, math] = scores;  
// english 為 100
// chinese 為 60
// math 為 undefined

以上例子中，變數 math 對應在陣列位置 index = 2 的元素不存在，所以會是 undefined；變數 chinese 對應在陣列位置 index = 1 的元素不存在，但有設定預設值所以會是 60；變數 english 對應在陣列位置 index = 0 的元素存在，雖然有設定預設值，但仍然會是 100。

部分解構賦值

如果只想要取得陣列中某些位置的值呢？那就直接忽略該位置的變數即可：

const scores = [100, 96, 87]

const [english, , math] = scores;  
// english 為 100
// (跳過 96)
// math 為 87

以上例子中，我們只取陣列中 index 為 0 和 2 的元素，因此只在這兩個位置設定變數，而 index 為 1 直接留空就可以忽略該位置囉！

總結

destructuring assignment 除了用在存取物件之外，也可用在存取陣列，同樣用一行程式碼就能取得多個陣列元素，另外也能設定預設值或是部分解構等等，若搭配下一篇文章將介紹的 rest/spread operator 將讓使用者操作陣列或物件更加如魚得水！

參考資料：

1. Destructuring assignment - JavaScript | MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment