iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
自我挑戰組

追憶JS年華系列 第 4

Day-04 JavaScript資料型別(3)

常見的JavaScript資料型別,可概分為基本型別(primitives)與物件型別(object)。基本型別已為前文所述,而基本上,基本型別以外的型別,就是本篇的主題──物件型別了。

資料型別:物件

建立與存取

JavaScript的物件概念與許多程式語言相近,可包含無屬性、單一屬性或複數屬性,產生多樣化的運算及用途。

除了瀏覽器內建物件(BOM)如window(瀏覽器視窗)、document(網頁)、location(網址)、date(日期時間)之外,我們常常必須自建物件。在JavaScript有兩種作法替它塞入各種屬性(key)與值(value)。

傳統作法:

let prefecture = new Object();

	prefecture.name = “Miyagi”
	prefecture.region = “Tohoku”
	prefecture.callName = function(){
	alert ( this.name );
}

物件實字(object literal),使用大括號即可:

let prefecture = {
	name = “Miyagi”
	region = “Tohoku”
	callName = function(){
	alert ( this.name );
    }
}

在本例中,name為屬性,Miyagi為值,依此類推。建立之後,可再透過點(.)來存取它。在剛剛大括號寫法的程式碼下方加上:

prefecture.name //印出 Miyagi
prefecture.region //印出Tohoku
prefecture.callName //印出 Miyagi

然而,遇到屬性命名不合法(如:以數字命名),透過點存取值將發生錯誤。為此,可另使用中括號存取之:

let prefecture = {
	“004” = “Miyagi”
}

prefecture[“004”] //印出 Miyagi
prefecture.004 // 產生錯誤 SyntaxError: Unexpected number

屬性的增減及確認

新增屬性只要以 = 指定即可。承前例,若要新增宮城縣的首府,這裡加上一個capital屬性給它:

let prefecture = {
	name = “Miyagi”
	capital = “Sendai”
	region = “Tohoku”
}

刪除屬性只須一行detele即可,承前例,若要移除宮城縣的地區分類,就寫:

delete prefecture.region

刪除後、不存在的屬性,將屬於undefined屬性。以移除region屬性後的前例為例,若此時印出:

console.log(prefecture.region) //已是undefined而非 Tohoku

凡是總有例外。若此時要呼叫、檢查的屬性就是undefined,而它其實還存在時,可以用兩種方法加以檢查。如:

let prefecture = {
	name = “Miyagi”
	capital = “Sendai”
}

//以下使用in運算子
console.log (“name” in prefecture) //true屬性存在
console.log (“region” in prefecture) //false屬性不存在

//以下使用hasOwnProperty()方法
prefecture. hasOwnProperty(“name”) //true屬性存在
prefecture. hasOwnProperty(“region”) //false屬性不存在

兩者的差別在於,hasOwnProperty()方法只確認該物件/屬性本身,in運算子還會追溯物件的原形鍊(prototype)。有關概念,將於後續文章再做介紹。


上一篇
Day-03 JavaScript資料型別(2)
下一篇
Day-05 JavaScript陣列
系列文
追憶JS年華30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言