今天來學習 ES6 中的解構賦值，功能是讓我們在寫物件、陣列的時候可以很便利的使用縮寫，快速的將多筆資料取出成獨立變數，增加可讀性並減少程式碼，今天就來練習物件的解構賦值應用，並跟平常的做法做個比較唄！

物件會使用屬性名稱（key）來做對應，必需要指定正確的屬性名稱來取得對應的屬性值（value）。

基本使用

假如我們有一個餐廳的物件 restaurant 長這樣：

let restaurant = {
  name: '那一天義法餐館',
  chef: '阿華師',
  menu: {
      duck: '法式櫻桃鴨胸',
      pig: '噶瑪蘭黑豚',
      rice: '檸檬奶油煙燻鮭魚燉飯'
  }
};

如果我們要把屬性「name」、「chef」取出來單獨使用的話，會這樣寫：

// 以前的寫法
let name = restaurant.name
let chef = restaurant.chef

//解構賦值的寫法
let { name, chef } = restaurant

以上得出的結果都會是 name=那一天義法餐館 chef=阿華師 ，用解構賦值的方法就不用一個一個建立變數囉，是不是很方便！

重新賦予變數的名稱

變數名稱預設會是物件的屬性名稱，但如果不喜歡的話，可以重新賦予變數新的名稱，例如以下我們把屬性 chef 的值取出來，重新命名為 dog，就可以這樣寫：

let restaurant = {
  name: '那一天義法餐館',
  chef: '阿華師',
  menu: {
      duck: '法式櫻桃鴨胸',
      pig: '噶瑪蘭黑豚',
      rice: '檸檬奶油煙燻鮭魚燉飯'
  }
};
let { chef: dog } = restaurant;
// dog=阿華師;

如果我們想取得物件中的物件 menu 裡面的屬性的話，可以這樣寫：

let { duck,pig,rice } = restaurant.menu;

簡單的一行，就可以得到duck=法式櫻桃鴨胸 pig=噶瑪蘭黑豚 rice=檸檬奶油煙燻鮭魚燉飯，是不是省了很多程式碼跟寶貴的時間呢！
一樣可以輕輕鬆鬆的給他重新命名：

let { duck:NO1,pig:NO2,rice:NO3 } = restaurant.menu;

出來的結果就會是 NO1=法式櫻桃鴨胸 NO2=噶瑪蘭黑豚 NO3=檸檬奶油煙燻鮭魚燉飯

設定默認值

假如我們菜單 menu 裡沒有 soup，我們卻在宣告時設定 soup 的話，soup 就會出現 undefined

let { duck,pig,rice,soup } = restaurant.menu;
console.log(soup) // undefined

如果不想出現 undefined，我們可以在宣告同時給變數一個默認值，寫法如下：

let { duck,pig,rice,soup='今天沒有湯' } = restaurant.menu;
console.log(soup) // 今天沒有湯

函式的應用

解構也能使用在函式的參數，使用方式如同將傳入的物件對應到函式參數上，以下範例簡單示範自訂變數名稱、順序、預設值的各種情況：

function love ({a = '沒有人', b = '你'}) {
  console.log(`${a} 愛 ${b}`)
}
love({ a: '我', b: '睡覺' }); // 我愛睡覺
love('我', '睡覺'); // 沒有人愛你
love({ b: '工作' }); // 沒有人愛工作
love({ b: '世界紅茶', a: '我' }); // 我愛世界紅茶
love({}); // 沒有人愛你

以上希望大家有比較了解物件解構的運用，明天會練習陣列解構賦值的運用歐～另外那一天義法餐館我覺ㄉ很好吃，順便推薦給大家嚕 ^______^

參考文章
卡斯伯：鐵人賽：ES6 解構賦值
CodecastsJS
那一天義法餐館

ESLint airbnb 撰寫規則
5.1 存取或使用多屬性的物件時，請使用物件解構子