iT邦幫忙

2021 iThome 鐵人賽

DAY 9
2
Modern Web

JavaScript 魔法入門 - 從入門到中階觀念系列 第 9

入門魔法 - 物件

前情提要

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

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

「如何煉製愛情靈藥...?」

艾草:「對呀,看到底下這堆配方了嗎?」

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

艾草:「來來來,跟著我學習物件。學完後試著整理看看吧 ~~ 」

https://ithelp.ithome.com.tw/upload/images/20210923/20139066oMbADOBJpM.png
(總覺得被推了一件奇怪的差事...)


物件

其實 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 必修篇 - 前端修練全攻略(六角學院)


上一篇
入門魔法 - 陣列
下一篇
入門魔法 - function 函式
系列文
JavaScript 魔法入門 - 從入門到中階觀念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
南國安迪
iT邦新手 3 級 ‧ 2021-09-23 16:02:31

圖很美 /images/emoticon/emoticon24.gif

艾草 iT邦新手 3 級 ‧ 2021-09-24 20:34:08 檢舉

謝謝~ ✧。 ٩(ˊᗜˋ✧)و✧。
分享一下製圖是透過 Canva 網站,推很方便製圖 ~

哇,感謝分享
/images/emoticon/emoticon41.gif

我要留言

立即登入留言