Es gibt zwei Möglichkeiten, die Eigenschaften eines Objekts festzulegen, zu ändern und darauf zuzugreifen: die Punktnotation und die Klammernotation.
Punktschreibweise
Wie in einigen früheren Beispielen zu sehen, wird bei der Punktnotation ein Punkt (.
) zwischen einem Objekt und dem Property-Schlüssel verwendet, auf den zugegriffen wird:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
Mithilfe der Punktnotation können Sie mithilfe von Zuweisungsoperatoren auf Eigenschaften zugreifen, sie ändern oder neue erstellen:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
Wenn Sie Property-Schlüssel mithilfe der Punktnotation verketten, können Sie auf die Properties von Objekten zugreifen, die selbst Properties eines Objekts sind:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
Wenn Sie diese Syntax jedoch verwenden, wenn ein in der Kette angegebener Schlüssel möglicherweise nicht definiert ist, kann dies zu Fehlern führen. Im folgenden Beispiel ist myMissingProp
keine Eigenschaft des myObj
-Objekts. Der Zugriff auf myObj.myMissingProp
führt daher zu undefined
. Wenn Sie dann versuchen, auf eine Eigenschaft von undefined
zuzugreifen, als wäre es ein Objekt, wird ein Fehler ausgegeben:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
Um dieses Problem zu beheben, wurde in ES2020 der „optionale Verknüpfungsoperator“ (?.
) eingeführt, mit dem auf verschachtelte Eigenschaften von Objekten sicher zugegriffen werden kann.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
Schlüssel, auf die über die Punktnotation zugegriffen wird, werden nicht in Anführungszeichen gesetzt, wie es bei Stringliteralen der Fall ist. Sie können die Punktnotation also nur für Property-Schlüssel verwenden, die gültige Kennzeichnungen sind:
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'
Daher sollten Sie bei der Angabe von Property-Schlüsseln nach Möglichkeit die Kennzeichnungsregeln einhalten. Wenn dies für einen bestimmten Schlüssel nicht möglich ist, können Sie mit einer alternativen Syntax in Klammernotation stringbasierte Objektschlüssel festlegen und darauf zugreifen, die nicht den Regeln für Kennungen folgen.
Klammernotation
Bei der eckigen Schreibweise werden Klammern ([]
) verwendet, die einen Wert enthalten, der einen String (oder ein Symbol) auswertet, der den Property-Schlüssel darstellt.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
Diese Syntax ist wesentlich toleranter und möglicherweise so tolerant, dass sie verwirrend ist, da der Wert in Klammern unabhängig von seinem Datentyp als Stringliteral ausgewertet wird. Hier werden beispielsweise der boolesche Wert false
und der numerische Wert 10
verwendet, um auf Properties zuzugreifen, die mit den Stringliteralschlüsseln "false"
und "10"
verknüpft sind :
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
Der Vorteil dieser Syntax liegt in ihrer Flexibilität. Sie ermöglicht den Zugriff auf Properties über dynamisch erstellte Strings. Im folgenden Beispiel wird mit einer Zufallszahl eine der drei Eigenschaften eines Objekts ausgewählt:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
Wie bei der Punktnotation können Sie mit der eckigen Notation mithilfe von Zuweisungsoperatoren sowohl auf neue Properties zugreifen als auch neue erstellen:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }