屬性存取子

設定、更改及存取物件屬性的方式有兩種:點標記法和方括號標記法

點號

如先前的範例所示,點標記法在. 物件,以及要存取的屬性鍵:

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.myMissingPropundefined 中產生結果。嘗試接著存取 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." }