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

假如我們有一個物件 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 物件