[筆記] ES6: Destructuring Assignment 解構賦值的使用

解構賦值 Destructuring assignment

認識解構賦值

在 MDN 上闡述了一段解構賦值的解釋：

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

解構賦值語法是一種 JavaScript 運算式，可以將陣列或物件中的資料取出成獨立變數

簡單來說，我們可以透過 Destructuring 來拆解複雜的物件或陣列結構，並提取其中的一小部分來做使用。在 Destructuring 的語法中，可以同時做到「變數宣告」和「變數賦值」兩件事情。

使用情境

假設我們要呈現某間店家的資訊，而該店家的相關資訊存在一個 store 的物件當中 — 物件中包含了店家名稱、員工數、和三個分店的地址。在學習解構賦值之前，我可能會這麼撰寫我的 Javascript 程式碼：

的確最終可以達到預期的成果，呈現店家資訊，但在撰寫程式碼時，可能會發現：為了要取得 store 物件當中的資訊 — 例如 store 物件中 locations 物件裡的某一間分店地址 — 就會需要撰寫一連串的程式碼：store.locations.singapore ，然而借助「Destructuring」在撰寫程式碼時，會更簡潔和易讀，我們先稍微偷看一下成果：