前情提要

艾草：「來，既然要學習物件讓我帶你瞧瞧這個秘方。」

(從異空間拿出一張古老透著神秘光澤的紙。)

「如何煉製愛情靈藥．．．？」

艾草：「對呀，看到底下這堆配方了嗎？」

「呃... 蒲公英、洋甘菊等一堆雜七雜八的東西，你是不能整理一下嗎？」

艾草：「來來來，跟著我學習物件。學完後試著整理看看吧 ～～ 」

(總覺得被推了一件奇怪的差事．．．)

物件

其實 JavaScript 很多東西都是由物件組成的唷，所以我們今天先來簡單了解一下物件到底是什麼呢？

物件外層會由 {} 大括號包覆起來，物件內是屬性的組合，每組屬性間會由逗號區隔開，而屬性包含 key / value 。

let obj = {
	key:'value'
}

我們如果要一次宣告一個變數來記錄資料，會導致程式碼很大坨，資料看起來很雜亂，這時候我們就可以使用物件把相關的東西包覆起來，當要取出來時，在使用物件取值的方式，把需要的東西取出來，物件就像我們存放資料的空間。

那讓我們來學習物件如何取值吧！

物件取值

物件取值的方式有兩種：點記法、括弧記法

點記法是最常使用的方法，顧名思義就是用 . 點的方式取值，只要用點先選取該物件名稱，在選取該物件的屬性名稱 key ，就能得出 value 了。

let obj = {
	key:'value'
}
console.log(obj.key)//"value"

但點記法要特別留意的它無法選取前面是數字的物件，如下：

let obj = {
	001:"我是001的 value"
}
console.log(obj.001)//報錯 Uncaught SyntaxError: missing ) after argument list

此時就要透過另一種方式：括弧記法，括弧記法是使用中括號的形式，並透過字串的方式取值。

let obj = {
	001:"我是001的 value",
	key:'value'
}
//透過括弧記法取數字
console.log(obj[001])//成功取出 "我是001的 value"
console.log(obj['001'])//undefined

//透過括弧記法取非數字
console.log(obj['key'])//成功取出 "value"
console.log(obj[key])//報錯 key is not defined

請注意要取出數字型態時不用使用字串包覆，否則會無法成功取出，而其他情況要使用字串的方式取值。

括弧記法還可以使用帶入變數的方式取值。

let obj = {
	name:"王小明"
}
let a = "name";
console.log(obj[a])//"王小明"

物件新增

物件新增時可透過點記法、括弧記法取值的方式，先命名一個自定義的屬性名稱後在賦予該屬性值。

let obj = {};

//透過點記法新增屬性
obj.key = 'value';
console.log(obj)//{key: "value"}

//透過括弧記法新增屬性
obj['name'] = '王小明';
console.log(obj)//{key: "value", name: "王小明"}

物件修改

物件修改時可透過點記法、括弧記法取值的方式，選取要修改的屬性名稱，並賦予該屬性名稱新的值。

let obj = {
	name:"小花"
};

//透過點記法修改屬性
obj.name = '大花';
console.log(obj)//{name: "大花"}

//透過括弧記法修改屬性
obj['name'] = '王大花';
console.log(obj)//{name: "王大花"}

物件屬性刪除

使用 delete 操作，在 delete 後方放入想刪除的屬性。

let obj = {
	001:"我是001的 value",
	key:'value'
}
delete obj[001];
console.log(obj)//{key: "value"}

總結

物件

• 物件的屬性包含 key / value
• 物件的選取可以使用點記法或括弧記法
• 括弧記法可以讀取到數字、變數
• 想刪除物件的屬性可以使用 delete

小練習

請參考底下程式碼，選出整理愛情靈藥秘方時錯誤敘述的選項

let loveElixir = {
  flowers: ["dandelion", "chamomile", "stevia"],
  hotWater: "300ml",
  steepingTime: 5,
  seasoning: {
    honey: "5g",
  }
};

A 想要更改浸泡時間(steepingTime) 為 10 ，可以這樣寫 loveElixir.steepingTime = 10
B 想要在調味料(seasoning)內新增糖(sugar)5g，可以這樣寫 loveElixir['seasoning'].sugar = "5g"
C 想在花類(flowers)新增一筆艾草(mugwort)，可以這樣寫 loveElixir.flowers.push('mugwort')
D 想刪除調味料(seasoning)內的蜂蜜(honey)屬性，可以這樣寫 loveElixir.seasoning.honey = ""

解答：想刪除物件的屬性可以透過 delete 操作，選項 D 應該改成 delete loveElixir.seasoning.honey

參考文獻

JavaScript 必修篇 - 前端修練全攻略（六角學院）