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