5 min readOct 30, 2021

ㄟ問你喔，什麼是物件取值？兩種方法差異在哪？

在開始看物件取值之前，再看一看物件的基本定義吧！

何謂物件？它的功能是什麼

物件是 JavaScript 的物件型別之一，理解它的方法就跟在認識真實世界中的實體物件一樣，JS 的物件內會有很多屬性，而屬性可以是一個原始型別的值、物件或陣列，這些資料可以構成一個東西的詳細資訊。

假設有一個筆袋，這是它的資訊：

一個 Kokuyo 的黑色筆袋
2020 年出廠
材質是棉布
非手工製造
內容物：一枝尺、一枝鉛筆、一枝原子筆，及一個橡皮擦
售價：原價 990 元，使用會員卡打折後為 891 元

而這筆資訊轉換為物件，可以這樣紀錄：

let pencilCase = {      "brand": "Kokuyo", 
     "year": 2020, 
     "color": "black", 
     "material": "cotton", 
     "isHandmade": false, 
     "contents": ['ruler', 'pencil', 'pen', 'eraser'], 
     "01_price": 990, 
     "02_price": 891 }

物件取值是在做什麼？

物件裡面可以裝載很多資料，妥善的規劃程式碼結構，並懂得運用這些資料，可以讓程式碼更為精簡。當需要從物件取用這些資料的時候，就要透過物件取值。

兩種物件取值的方法

1. 用點取值 (Dot notation): 直接取到物件內的某一個屬性的值

console.log(pencilCase.brand)// 回傳 "Kokuyo"console.log(pencilCase.year)// 回傳 2020 console.log(pencilCase.contents) 
// 回傳 ['ruler', 'pencil', 'pen', 'eraser'] console.log(pencilCase.01_price) // 回傳 undefined

！！！！
沒錯，你沒看錯。
01_price 這個屬性，用點取值抓不到資料，
因此要用備案二：用方括號取值。

2. 用方括號取值 (Bracket notation):

console.log(pencilCase["brand"])// 回傳 "Kokuyo" console.log(pencilCase["year"])// 回傳 2020 console.log(pencilCase["contents"]) 
// 回傳 ['ruler', 'pencil', 'pen', 'eraser'] console.log(pencilCase["01_price"]) // 回傳 990

小結

當屬性名稱開頭為：英文字母、漢字、下底線( _ ) 或錢字符號 ( $ ) 都可以直接用點取值，除此之外的都屬特殊字元，用方括號才取得到值。

在物件中代入變數

前情提要：obj[value]透過方括號的物件取值，value 可以視為是一個字串(透過單或雙引號包裹的一個字串、數字或布林)，而我們可以透過此一特性，在物件中代入變數。

在前述例子中，用方括號取值的時候，都會在屬性外面再加一個單引號 ‘ ’或雙引號 “ ”，因為這些屬性都是屬於原始型別資料，因此需要透過單引號或雙引號來選取這些屬性。

為何要在物件中代入變數？

當需要抓取物件內某一個屬性的值，再做其他運用，這時候該怎麼做？

可以透過宣告一個新的變數，另外單獨儲存這一個值。

let myPencilCase = {     "price": 300,     "contents": [ "scissor", "eraser", "fountain pen"] } let stationary = "contents"; //在物件中代入變數console.log(myPencilCase["contents"]); 
//回傳 [ "scissor", "eraser", "fountain pen"](3) console.log(myPencilCase[stationary]); 
//回傳 [ "scissor", "eraser", "fountain pen"](3) 
//代表已成功在物件中代入變數

當透過方括號的物件取值代入變數的時候，也就等同於把 “contents” 這個字串代入到方括號內的意思，因此兩種方法都可取得一樣的值。

註：用點取值的方式無法取到變數，只能直接取到屬性。

總結

物件取值有兩種方式：用點( . ) 或用方括號 [ ] 取值。
用點取值只能取到屬性名稱開頭為：

英文字母
漢字
下底線( _ )
錢字符號 ( $ )

3. 用點取值取不到的屬性，可以用方括號 [ ] 取值。

4. 當有需要從物件中抓取一筆值另作他用，可透過方括號 [ ] 取值代入變數來儲存這筆值。