設定、更改及存取物件屬性的方式有兩種:點標記法和方括號標記法。
點號
如先前的範例所示,點標記法在.
物件,以及要存取的屬性鍵:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
您可以使用點號標記法來存取、變更或建立新屬性: 指派運算子:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
以點號標記法鏈結屬性鍵後,您就能存取 做為物件屬性:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
不過,若在鏈結中指定的鍵時,可能不會使用此語法
都有可能會造成錯誤在以下範例中,myMissingProp
不是
其屬性為 myObj
物件的屬性,因此嘗試存取 myObj.myMissingProp
在 undefined
中產生結果。嘗試接著存取 undefined
上的屬性,就像
該物件是物件,會導致錯誤:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
為解決這個問題,ES2020 推出了「選用鏈結運算子」(?.
)。
安全地存取物件的巢狀屬性
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
使用點號標記存取的鍵不會以半形引號括住 (例如字串) 也就是常值換句話說,如果只存取屬性鍵,可以使用點號標記法 都是有效的 ID:
const myObj = {
"1": true,
"key with spaces": true
};
myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal
myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'
因此,建議最好遵守識別碼規則 盡可能在可能的情況下才指定屬性鍵如果無法執行這項作業 替代的括號標記法語法可讓您設定及存取 字串型物件鍵不符合 ID 規則。
括號標記法
括號標記法使用一組括號 ([]
),其中包含一個用來評估的值
代表
屬性鍵。
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
這個語法明顯較寬鬆,而且可能較為寬鬆
因為括號中的值會評估為字串常值,而會造成混淆
無論資料類型為何例如,此處布林值 false
數字值 10
可用於存取與字串相關聯的屬性
常值索引鍵 "false"
和 "10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
這個語法的強度是其靈活性,因此 用來存取屬性的動態建立字串以下範例使用 隨機數值,藉此選取物件的三個屬性之一:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
與點標記法一樣,使用方括號標記法就能存取及建立新的 透過「指派運算子」處理屬性:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }