iT邦幫忙

2021 iThome 鐵人賽

0
自我挑戰組

追憶JS年華系列 第 29

Day-29 特集:解構 destructing

  • 分享至 

  • xImage
  •  

在現行的ES6版JavaScript中,增加了以解構(destructuring)替物件或陣列賦值的新功能,此即「解構賦值」。使用時,可將之視為一語法糖衣,讓我們更短的code達到相同效果,也更易閱讀。

原理及說明見延伸閱讀(這裡)

舉例來說,若要印出以下物件的賦值,傳統會選擇「印出法1」的寫法。若採用解構賦值即「印出法2」,程式碼更短,且效果相同:

const obj = {
    name: "123",
    age: 11,
    action: "hello"
}

//印出法1
let name = obj.name
let age = obj.age
console.log(name, age)

//印出法2
let {name, age} = obj
console.log(name, age)

在第二個例子中,透過解構賦值,可以讓函式一再精簡:

function hello (n){
let name = n.name
let name = n.age
}

//函式精簡
function hello (n){
let {name, age} = n
}

//更精簡
let ({name, age}){
}

上一篇
Day-28 特集:例外處理與FP
下一篇
Day-30 特集:迴圈實例題
系列文
追憶JS年華30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言