前言

在上一篇文章中，我們提到了如何透過 object literal extension 讓使用 object literal 建立 object 的語法變得更簡潔，這一篇我們將介紹如何透過 destructuring assignment 來存取物件時變得更方便。

傳統取得物件屬性的方法

在沒有 destructuring assignment 的情況下，若要取得物件的多個屬性，必須要一行一行程式碼來取得：

const user = {
  firstName: 'Tom',
  lastName: 'Cruise',
  gender: 'male'
};

const firstName = user.firstName;  // 'Tom'
const lastName = user.lastName;    // 'Cruise'
const gender = user.gender;        // 'male'

以上例子中，透過 物件名稱.屬性名稱 來取得物件屬性，一次只能取得一個屬性並且指派給一個變數。

destructuring assignment(解構賦值)

若改用 destructuring assignment 可以透過 const { 變數名稱1, 變數名稱2, ... } = 物件名稱 來一次取得多個屬性，若變數名稱在此物件中也有同樣的屬性名稱，即可取得該屬性值：

const user = {
  firstName: 'Tom',
  lastName: 'Cruise',
  gender: 'male'
};

const { firstName, lastName, gender } = user;  
// firstName 為 'Tom'
// lastName 為 'Cruise'
// gender 為 'male'

解構賦值並且指派給新變數

若想要指派給不同的變數名稱呢？傳統的方法很直觀：

const user = {
  firstName: 'Tom',
  lastName: 'Cruise',
  gender: 'male'
};

const userFirstName = user.firstName;  // 'Tom'
const userLastName = user.lastName;    // 'Cruise'
const userGender = user.gender;        // 'male'

改用 destructuring assignment 也做得到，可以透過 const { 屬性名稱1: 變數名稱1, 屬性名稱2: 變數名稱2, ... } = 物件名稱 的方式，同時解構賦值並且指派給新變數：

const user = {
  firstName: 'Tom',
  lastName: 'Cruise',
  gender: 'male'
};

const { firstName: userFirstName, lastName:　userLastName, gender: userGender } = user;  
// userFirstName 為 'Tom'
// userLastName 為 'Cruise'
// userGender 為 'male'

解構賦值並且設定預設值

若使用 destructuring assignment 要取得的屬性不存在，我們則可以透過 const { 屬性名稱1 = 預設值1, 屬性名稱2 = 預設值2, ... } = 物件名稱 給它一個預設值：

const user = {
  firstName: 'Tom',
  lastName: 'Cruise',
  gender: 'male'
};

const { height, score = 60, gender = 'unknown' } = user;
// height 為 undefined
// score 為 60
// gender 仍然為 'male'

以上例子中，從 user 取屬性 height 不存在所以會是 undefined；取屬性 score 並且設定預設值，因為不存在所以會是預設值 60；取屬性 gender 並且設定預設值，但該屬性存在所以仍然會是 'male'，而不是預設值 'unknown'。

解構賦值並且同時指派給新變數以及設定預設值

當然我們也可以同時指派給新變數以及設定預設值，語法如下：

const { 屬性名稱1: 變數名稱1 = 預設值1, 屬性名稱2: 變數名稱2 = 預設值2, ... } = 物件名稱

總結

destructuring assignment 讓開發者在存取物件屬性時，用一行程式碼取得多個屬性值，另外還可以指派新變數、設定預設值等等，下一篇文章將會接著介紹陣列的 destructuring assignment。

參考資料：

1. Destructuring assignment - JavaScript | MDN - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment