iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 21
3
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 21

Day21【ES6 小筆記】物件屬性存取方式 - 以一篇業配文為例

物件屬性存取方式
先前我們有介紹過物件的解構賦值,用於存取多屬性的物件,而今天我們就來聊聊存取單一個物件時,有什麼方法吧!

假如我們有一個物件 restaurant 紀錄這間好吃的餐廳的相關資訊:

const restaurant = {
  store: '那一天義法餐館',
  ':D stars': 65,
  ':(': 0,
  meals: {
    法式櫻桃鴨胸: {
      parice: 280,
      sauce: '覆盆子醬',
      combo: '莓果吐司、番茄玉米濃湯、法式千層洋芋、烤蔬菜、baby生菜&和風醬',
    },
  },
  檸檬奶油煙燻鮭魚燉飯: {
    price: 250,
    combo: {
      soup: '番茄玉米濃湯',
    },
  },
};

那我們要如何存取這個餐廳物件內的屬性呢?有兩種方式:

特性存取(property access):使用一個點號 .
鍵值存取(key access):使用中括號及單引號 [' ']

兩者都可以取得屬性值,如果我們今天要取得餐廳名稱,使用方法如下:

// 特性存取 .
storeName = restaurant.store;
console.log(storeName); // 那一天義法餐館

// 鍵值存取 ['']
storeName = restaurant['store'];
console.log(storeName); // 那一天義法餐館

以上兩個方式都可以成功取得餐廳名稱 那一天義法餐館歐!


使用 .[] 的差別

  • 特性存取 .:右邊必須是一個識別字。

識別字的規範,簡單說就是只能是字母、數字、錢字號 $ 或 底線 ,並且不能以數字開頭,之後可加上 a-z、A-Z、$、 和數字 0-9,可為關鍵字或保留字。

  • 鍵值存取 [' ']:中括號裡面可以放字串、變數、運算式、特殊符號...等。

以剛剛的餐廳物件為例,假如我們要知道這間餐廳的評價值「:D stars」,就必須要用鍵值存取 [' '],用特性存取 .就會出錯:

// 特性存取
star = restaurant.:D stars;
console.log(star); // 錯誤

// 鍵值存取
stars = restaurant[':D stars'];
console.log(stars); // 65

因為我們要取得的屬性不是識別字,所以用特性存取會出錯,而使用鍵值存取的話,我們就可以成功得到評價: 65 顆星,當然我們還有一個更快的方法是直接去看 google 評論

所以如果我們今天在存取物件時,碰到特殊符號就要使用鍵值存取['']歐!


ESLint airbnb 怎麼說

來看看 airbnb 中關於物件屬性的撰寫規則

12.1 使用點 . 來存取屬性
5.1 存取或使用多屬性的物件時,請使用物件解構子。

所以存取單一個物件屬性時建議少用 [''] ,如果有多筆屬性的話就使用物件解構子!
推薦閱讀:Day10【ES6 小筆記】物件的解構賦值-以一間好吃的餐廳為例

12.2 需要帶參數存取屬性時請使用中括號 []

舉例來說,如果我們今天要知道鴨胸的配餐有什麼,寫一個 function 搭配鍵值存取 [''] 就會這樣寫:

function getSet(prop, prop2, prop3) {
  return restaurant[prop][prop2][prop3];
}

const darkSet = getSet('meals', '法式櫻桃鴨胸', 'combo');
console.log(darkSet); // 莓果吐司、番茄玉米濃湯、法式千層洋芋、烤蔬菜、baby生菜&和風醬

耶!我們可以成功取得鴨胸的套餐包含了莓果吐司、番茄玉米濃湯、法式千層洋芋、烤蔬菜、baby生菜&和風醬!相當的划算,在主廚精湛的手藝下,鴨皮金黃酥脆,肉質仍保持軟嫩多汁,搭配覆盆子醬汁,讓風味提升到更高的層次,附上法式傳統小點千層洋芋,口感與風味相當豐富!baby 生菜富含高度營養價值,搭配新鮮水果與和風醬汁清脆爽口~!濃湯也絕不添加勾芡粉或粉包,而是當季新鮮食材熬煮而成,小小的餐館將每個最好的元素結合起來,少一點油炸、多一點健康,好的食材只要簡單的鹽、胡椒就很圓滿了,不需要那些破壞味蕾的化學調味料,主廚的用心,吃過一次就看得見!

以上~希望這個簡單的舉例有幫助大家了解物件存取的方式歐!
那一天義法餐館 法式櫻桃鴨胸 宜蘭好野鴨 高雄美食


訂位資訊

營業時間:11:30-14:30 17:30-20:30(週二公休)
訂位專線:07-5528170
粉絲專頁:那一天義法餐館
instagram:hejigon
小店座位不多,假日建議先來電確認有沒有座位才不會白跑一趟歐 ^___^!


參考文章:
卡斯伯:JavaScript 就是一堆物件的概念
桑默:你懂 JavaScript嗎?#17 物件


上一篇
Day20【ES6 小筆記】什麼是「語法糖」哩?
下一篇
Day22【ES6 小筆記】變數提升(Hoisting)與暫時死區(TDZ)
系列文
透過 ESLint 練習 JavaScript ES630
0
紅茶小公主
iT邦新手 5 級 ‧ 2019-09-22 20:59:13

你不錯

江江好 iT邦新手 5 級 ‧ 2019-09-24 23:17:44 檢舉

我真的很棒,除了很會睡過頭之外XDD

0
Charles
iT邦新手 5 級 ‧ 2019-09-22 21:53:13

重點是法式櫻桃鴨胸!XD

江江好 iT邦新手 5 級 ‧ 2019-09-24 23:18:01 檢舉

沒錯 XDDD 抓到重點摟!

0

原來是業...業配...

0

我要留言

立即登入留言