滿滿的大 ES6 - Destructuring

Published in

前端急制

5 min readFeb 21, 2017

身為一個優雅的工程師，你當然需要優雅地處理數組!
現在才談已經不夠潮的 ES6 ，絕大部分的新工具都是針對數組的處理
其中翻成中文更看不懂的 Destructuring (解構)，更是替滿身汗臭的臭宅工程師蛻變成某個角度像金城武的優雅型男的必備良藥。

先來簡單看看 Destructuring 的模樣

// EX. 1
const [a, b] = ['a', 'b']
console.log(a) // 'a'
console.log(b) // 'b'// EX. 2
const [a, b, ...rest] = [1, 2, 3, 4, 5]
console.log(a) // 1
console.log(b) // 2
console.log(rest); // [3, 4, 5]// EX. 3
const {a, b} = {a: 1, b: 2}
console.log(a) // 1
console.log(b) // 2

沒那麼帥氣? 那再來看看它整型前的樣子

// EX. 1
var origin = ['a', 'b'];
var a, b;
a = origin[0];
b = origin[1];
console.log(a); // 'a'
console.log(b); // 'b'// EX. 2
// 這個範例太麻煩了懶得寫// EX. 3
var origin = {a: 1, b: 2}
var a, b
a = origin.a
b = origin.b
console.log(a); // 1
console.log(b); // 2

是不是有白冰冰變范冰冰的氣勢?

夠聰明的你，現在可能會問:「實務上，Destructuring 能帶來甚麼幫助呢?」

舉個簡單的例子，今天我們要實作一個創造一台新車的 Function，可以選擇車子的廠牌、型號、顏色、排氣量，這個 Function 可能會長成這樣

function createCar(brand, type, color, displacement) {  // 造車程序...

}createCar('Ford', 'FIESTA', 'Gray', '998 cc')

乍看好像沒甚麼問題，那如果是在隔了一百多行後又呼叫了一次這個 Function 呢? 這時候可能就記不得 createCar() 帶的參數順序了吧? 你名義同事也拿著刀非常火地在背後問你寫這是三小了吧?

這時候只要改寫成這樣

function createCar({brand, type, color, displacement}) {// 造車程序...

}const newCar = {
  brand: 'Ford',
  type: 'FIESTA',
  color: 'Gray',
  displacement: '998 cc'
}createCar(newCar)

水腦同事的失憶症，bye bye~

現在的你已經不再是個普通的臭宅了，接著來點進階的
我們來重溫抽學伴，班上公關拿了一份好不容易才願意跟我們交換MSN的文組學伴列表，上面有每個學伴的名稱、顏值、MSN

一看，怎麼會有這麼醜的API，讓我們來把它美化一番

// 文組學伴給的格式
const meiMeis = [
  ['Amy ', 90, 'amy@msn.com'],
  ['Brenda', 92, 'brenda@msn.com'],
  ['Carol', 88, 'carol@msn.com'],
  ['Debbie', 95, 'debbie@msn.com']
]// 希望的格式
const newMeiMeis = [
  {name: 'Amy', yenValue: 90, msn: 'amy@msn.com'},
  {name: 'Brenda', yenValue: 92, msn: 'brenda@msn.com'},
  {name: 'Carol', yenValue: 88, msn: 'carol@msn.com'},
  {name: 'Debbie', yenValue: 95, msn: 'debbie@msn.com'}
]

透過 Destructuring 我們可以優雅的這麼作

const newMeiMeis = meiMeis.map(([name, yenValue, msn]) => {
 return {name, yenValue, msn}
})

好囉，有了漂亮的格式，臭宅們現在可以更方便的寫個函式把學伴們全都加進好友名單囉~

接著把壓軸搬給各位穿著燕尾服的臭宅們看看，同事們要團購，當然不會找我們這樣的邊緣人，但是身為工具人，我們得幫點忙，數組 [300, 600, 20, 90] 是同事們訂購商品的價格，每個商品各有十個人訂購，我們要把它生成一個每個數字都變十倍的數組 [3000, 6000, 200, 900]，讓數學差到不行的工讀生方便去匯款

當然，這邊我們可以用 map、forEach、甚至是 reduce 等 helper 輕鬆做到同樣的效果，不過還是讓我有個理由秀秀 Destructuring 的優雅吧

const prices = [300, 600, 20, 90]const counter = ( [price, ...rest] ) => {
  return price == null ? [] : [price * 10, ...counter(rest)]
}counter(prices) // [3000, 6000, 200, 900]

對，我們又更靠近優雅一步了
如果現在沒辦法從你的任何角度找到跟金城武的相似之處

沒關係，至少...你是個好人

滿滿的大 ES6 - Destructuring

Written by Osaki Hsieh