常見的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)。有關概念,將於後續文章再做介紹。