「Vue.js 學習筆記 Day12」- ES6（解構賦值-物件篇）

程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！

上一篇優先首先介紹了認識 ES6 解構賦值（destructuring）的陣列篇，而這一篇內容將著重在解構賦值（destructuring）的物件篇。

Photo Credit by zhenzhong liu from unsplash

廢話不多說，直接切入重點～～～

物件解構賦值（object destructuring）

物件解構和陣列解構有著相同的概念，如同之前所提，陣列是使用「順序」作為索引值的對應。

但物件則是其「屬性名稱」來做對應，因此在物件解構賦值中沒有「順序」性的存在。

基礎用法

物件解構賦值的簡寫看似簡單，如同上圖這段程式碼中 let { player, jerseyNumber } = obj ，但實際上完整寫法如下：

let { player: player, jerseyNumber: jerseyNumber } = obj

它會根據前面的屬性名稱來對應要給的值，但值其實是賦與給冒號（：）後面的變數，如：player 和 jerseyNumber 。

換個寫法，相信你會更清楚，此時 py === '恰恰' ，而 jn === 23 。

let { player: py, jerseyNumber: jn } = { player: '恰恰', jerseyNumber: 23 }

因此，相對的，當冒號前的屬性名稱對應不到物件中的屬性名稱時，則會出現 undefined 的情況，如下圖程式碼：

小結論

在物件解構賦值中，冒號前是用來對應物件的屬性名稱，冒號後才是真正建立的變數名稱和被賦值的對象。

Photo Credit by Tim Gouw from unsplash

讓我們再透過三個案例來補充，並加深印象。

1. 重新賦予變數名稱

如以下 wang 在取得值後，將變數名稱改為 chen，因此 chen === '大王' ，而原先的 wang 變數就會消失，因此回傳 not defined 的訊息。

2. 混合使用練習

讓我們混合解構賦值的「陣列」和「物件」實際來練習一次吧。

請問此時答案是什麼，說明如下：

• player 取得右方的 恰恰'後，並將變數名稱改為 chia
• team 取得球隊陣列後，第一個值 '大王' 被放入一個空變數，接著自然會將將第二個值套用在 jay 上囉

3. 預設值

為了避免值沒有賦予造成 undefined，可以使用預設值避免此問題。

物件案例

team 屬性當中的變數 chia 會被預設值為 恰恰 ，如下方程式碼。

陣列案例

第一個變數 chia 會被重新賦值為 皮皮，第二個則會用預設值為 周董 。

Photo Credit by George Hiles from unsplash

結語

透過連續兩篇跟解構賦值有關的文章，相信有助於幫助大家進一步瞭解「陣列」和「物件」的差異，同時透過不同案例的說明，加深對於這個觀念的印象，而下一篇將接著介紹 「Vue 實例」觀念，敬請期待。

謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～
如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；
如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻
最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D