DAY 11
0
Modern Web

## 前言

``````let shoppingList = ['Oreo', 'Tilamisu', 'snickers']

``````

## 解構賦值 10 種方式

### 1. 陣列基本解構賦值

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

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

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

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

### 2. 物件基本解構賦值

``````// 宣告同時解構

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

// 修改變數名稱
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
``````

``````// 先賦值後解構，須加上 ()
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']

console.log(cake)   // Oreo
``````

### 4. 預設值

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

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

``````

### 5. 忽略部分賦值

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

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

### 6. 其餘參數 rest parameter

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

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

### 7. 存取 function return value

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

// 範例 2
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)

}

console.log(cake)       // Tilamisu
console.log(chocolate)  // Snickers
``````

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

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

``````let x = 'cookie'
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'
shoppingList[x]
let {[x]: favorite} = shoppingList
console.log(favorite) // Oreo
``````

## Reference

### 2 則留言

0

iT邦新手 5 級 ‧ 2021-09-26 13:28:23

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

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

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 檢舉