iT邦幫忙

DAY 10
0

透過 ESLint 練習 JavaScript ES6系列 第 10

Day10【ES6 小筆記】物件的解構賦值-以一間好吃的餐廳為例(Object Destructuring)

物件的解構賦值-基礎使用範例(Object Destructuring)
今天來學習 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 存取或使用多屬性的物件時,請使用物件解構子


上一篇
Day09【ES6 小筆記】展開運算子 - 基礎使用範例(Spread operator)
下一篇
Day11【ES6 小筆記】陣列的解構賦值-以哥哥的前女友為例(Array Destructuring)
系列文
透過 ESLint 練習 JavaScript ES620

1 則留言

0
hannahpun
iT邦新手 5 級 ‧ 2019-09-18 05:07:32

覺得你解釋的超容易理解,謝謝~~~

耶!謝謝~~

我要留言

立即登入留言