前言

let shoppingList = ['Oreo', 'Tilamisu', 'snickers']
let cookie = shoppingList[0] 

console.log(cookie) // 'Oreo'

如果要將陣列中的值另外存進變數，還在使用上面那種方法嗎？
今天分享一個更快速將陣列或物件的資料分別擷取存入變數的方法， ES6 新語法 - 解構賦值 Destructuring assignment

解構賦值 10 種方式

1. 陣列基本解構賦值

// 宣告同時解構
let [cookie, cake, chocolate] = ['Oreo', 'Tilamisu', 'Snickers']

//先宣告後再解構賦值
let cookie, cake, chocolate;
[cookie, cake, chocolate] = ['Oreo', 'Tilamisu', 'Snickers']

// 陣列存變數
let shoppingList = ['Oreo', 'Tilamisu', 'Snickers']
let [cookie, cake, chocolate] = shoppingList

// 以上結果皆能取得三個個別變數
console.log(cookie)    // Oreo
console.log(cake)      // Tilamisu
console.log(chocolate) // Snickers

2. 物件基本解構賦值

// 宣告同時解構
let {cookie, cake, chocolate} = {cookie: 'Oreo', cake: 'Tilamisu', chocolate: 'Snickers'}
console.log(cookie) // Oreo

// 先存入變數
let shoppingList = {cookie: 'Oreo', cake: 'Tilamisu', chocolate: 'Snickers'}
let {cookie, cake, chocolate} = shoppingList
console.log(cookie) // Oreo


// 修改變數名稱
let {cookie: c, cake: a, chocolate: o} = {cookie: 'Oreo', cake: 'Tilamisu', chocolate: 'Snickers'}
console.log(c) // Oreo
console.log(a) // Tilamisu
console.log(o) // Snickers

須留意，若先宣告變數再使用 {} 物件解構賦值，須在最外圍加上() 否則 {cookie, cake} 會被視為程式區塊而非物件，結尾記得也須加上 ; 視為結束

// 先賦值後解構，須加上 () 
let cookie, cake, chocolate;
let shoppingList = {cookie: 'Oreo', cake: 'Tilamisu', chocolate: 'Snickers'}

{cookie, cake, chocolate} = shoppingList   // Uncaught SyntaxError: Unexpected token '='
({cookie, cake, chocolate} = shoppingList); // 記得加上()及;

3. 變數值互換

let [cookie, cake] = ['Oreo', 'Tilamisu']
[cookie, cake] = [cake, cookie]

console.log(cookie) // Tilamisu
console.log(cake)   // Oreo

4. 預設值

可以先設置預設值以防沒有被賦值產生 undefined 的情況

// 無設預設值
let [cookie, cake, chocolate] = ['Oreo', 'Tilamisu']
console.log(chocolate) // undefined 


let [cookie = 'none', cake = 'none', drink = 'none'] = ['Oreo', 'Tilamisu']
console.log(cookie)    // Oreo
console.log(chocolate) // none

5. 忽略部分賦值

let [cookie,, chocolate] = ['Oreo', 'Tilamisu', 'Snickers']
console.log(cookie)     // Oreo
console.log(chocolate)  // Snikers

// 想忽略幾個就加上幾個逗號
let [,, chocolate] = ['Oreo', 'Tilamisu', 'Snickers']
console.log(chocolate) // Snikers

6. 其餘參數 rest parameter

let [cookie, ...others] = ['Oreo', 'Tilamisu', 'Snickers']

console.log(cookie) // Oreo
console.log(others) // ['Tilamisu', 'Snickers']

7. 存取 function return value

// 範例 1
function getShoppingList() {
    return ['Oreo', 'Tilamisu', 'Snikers']
}
let [cookie, cake, chocolate] = getShoppingList()
console.log(cookie) // Oreo

// 範例 2
function getShoppingAmount(cookie, cake1, cake2) {
    let cakeTotal = cake1 + cake2
    let total = cookie + cakeTotal;
    return [cakeTotal, total]
}

let [cakeAmount, totalAmout] = getShoppingAmount(20,50,100)

console.log(cakeAmount)  // 150
console.log(totalAmout)  // 170

8. 巢狀解構

let shoppingList = {cookie: 'Oreo', cake: ['Tilamisu', 'CheeseCake'], chocolate: 'Snikers'}

let {cookie, cake:[c1, c2], chocolate} = shoppingList

console.log(c1)    // Tilamisu
console.log(cake)  // error! 設置的變數是 c1, c2 並不是 cake

9. function 參數解構

// 將物件當參數傳入 function 
let shoppingList = {cookie: 'Oreo', cake: ['Tilamisu', 'CheeseCake'], chocolate: 'Snikers'}
let [cookie, cake, chocolate] = shoppingList(shoppingList)

function getItems({cookie, cake:[c1, c2], chocolate}){
    return [cookie, c1, chocolate]
}

console.log(cookie)     // Oreo
console.log(cake)       // Tilamisu
console.log(chocolate)  // Snickers

10. 動態計算屬性名 Computed Property Names

ES6 引入了一種稱為 動態計算屬性名 的方法，在物件取值的 [] 中可以放入變數、計算式或函式，更彈性動態的取得或設定物件的屬性名

let x = 'cookie'
let shoppingList = {cookie: 'Oreo'}
shoppingList[x]  // Oreo

let count = 0;
let shoppingList = {['item'+ (++count)]: 'Oreo', ['item'+ (++count)]: 'Tilamisu', ['item'+ (++count)]: 'Snickers' }
console.log(shoppingList)
// {item1: 'Oreo', item2: 'Tilamisu',item3: 'Snickers'}

此種方法也可以做解構賦值

let x = 'cookie'
let shoppingList = {cookie: 'Oreo'}
shoppingList[x]
let {[x]: favorite} = shoppingList
console.log(favorite) // Oreo

結語

學好解構賦值，絕對是你寫 code 好工具
舉例了這麼多，是否該來塊提拉米蘇呢 (๑❛ᴗ❛๑)۶

Reference

MDN - 解構賦值
ES6開始的JavaScript學習生活
How to Use Array and Object Destructuring in JavaScript
Computed Property Names