屬性存取子

您可以透過兩種方式設定、變更及存取物件的屬性:點號表示法方括號表示法

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

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

使用點標記法存取的鍵不會像字串文字常值一樣以引號括住。也就是說,您可以使用點標記法,只存取有效的識別碼屬性鍵:

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 規則,指定屬性鍵。如果無法為特定索引鍵執行這項操作,您可以使用替代的 方括號符號語法,設定及存取不遵循 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." }