オブジェクトのプロパティの設定、変更、アクセスには、ドット表記と角かっこ表記の 2 つの方法があります。
ドット表記
前述の例で見たように、ドット表記ではピリオド(.
)を
アクセス対象のプロパティキーを指定します。
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
ドット表記を使用してアクセスされるキーが文字列のように引用符で囲まれない 使用します。つまり、ドット表記を使用してプロパティキーにのみアクセスできます 有効な識別子である:
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 に関するルールに準拠することをおすすめします。 必ずプロパティキーを指定するようにしてください。これが不可能な場合は 角かっこ表記のもう 1 つの構文を使用すると、 識別子ルールに従っていない文字列ベースのオブジェクト キーです。
角かっこ表記
角かっこ表記では、次の値を含む角かっこ([]
)を使用します。
イベントを表す文字列(またはSymbol)
プロパティキーを使用します。
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
この構文の強みは柔軟性にあります。 プロパティにアクセスする必要があります。次の例では オブジェクトの 3 つのプロパティのいずれかを選択します。
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." }