iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
Modern Web

舌尖上的JS系列 第 11

D11 - 分子料理 解構賦值 Destructing Assignment

前言

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


上一篇
D10 - 點一籠熱呼呼的小籠閉包 Closure
下一篇
D12 - 那些年算不出來的 Math
系列文
舌尖上的JS30

2 則留言

0
南國ㄟ安迪
iT邦新手 5 級 ‧ 2021-09-26 13:28:23

如果要將陣列中的值另外存進變數,還在使用上面那種方法嗎?

上面那種方法:ㄟ 沒惹你吧?/images/emoticon/emoticon23.gif

Hooo iT邦新手 5 級 ‧ 2021-09-26 14:24:55 檢舉

學新招才能追到JS小姊姊好嗎

0
kekeke
iT邦新手 4 級 ‧ 2021-10-20 10:25:55

很喜歡妳生動的解說~~想額外請問 ... 解構運算子,在實務上會較常使用嗎?還是會以上述的方式來實做呢?/images/emoticon/emoticon41.gif

Hooo iT邦新手 5 級 ‧ 2021-10-21 10:41:03 檢舉

謝謝~~我也還在學習中沒有太多實務經驗,但自己在寫練習或小作品時會用到文章中的解構語法唷!

kekeke iT邦新手 4 級 ‧ 2021-10-21 10:55:05 檢舉

好的~謝謝尼,我目前也是剛接觸到解構語法,剛好看到妳的文章覺得很有趣來交流交流~

Hooo iT邦新手 5 級 ‧ 2021-10-22 10:26:14 檢舉

一起加油~~

我要留言

立即登入留言