Zugriff auf Properties

Es gibt zwei Möglichkeiten, die Eigenschaften eines Objekts festzulegen, zu ändern und darauf zuzugreifen: Punktnotation und Klammern.

Punktnotation

Wie in einigen vorherigen Beispielen gezeigt, wird bei der Punktnotation ein Punkt (.) zwischen einem und dem Attributschlüssel, auf den zugegriffen wird:

const myObj = {
    "myProp": "String value."
};

myObj.myProp;
> "String value."

Mit der Punktnotation können Sie Attribute aufrufen, ändern oder neue erstellen: Zuweisungsoperatoren:

const myObj = {};

myObj.myProp = "String value.";

myObj;
> Object { myProp: "String value." }

Durch die Verkettung von Eigenschaftsschlüsseln mithilfe der Punktnotation können Sie auf die Eigenschaften von -Objekte, die selbst Eigenschaften eines Objekts sind:

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myProp.childProp;
> true;

Die Verwendung dieser Syntax, wenn ein in der Kette angegebener Schlüssel möglicherweise nicht definiert wurden, kann Fehler verursachen. Im folgenden Beispiel ist myMissingProp kein des myObj-Objekts, sodass der Zugriff auf myObj.myMissingProp Ergebnisse auf undefined. Wenn Sie dann versuchen, auf eine Property in undefined zuzugreifen, wenn es sich um ein Objekt handelte, verursacht einen Fehler:

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 ein „optionaler Kettenoperator“ eingeführt. (?.) um sicher auf verschachtelte Eigenschaften von Objekten zuzugreifen.

const myObj = {
    "myProp": {
            "childProp" : true
    }
};

myObj.myMissingProp?.childProp;
> undefined

Schlüssel, auf die mit Punktnotation zugegriffen wird, werden nicht in Anführungszeichen wie ein String gesetzt. Literale. Das bedeutet, dass Sie mit der Punktnotation nur auf Attributschlüssel zugreifen können gültige Kennungen:

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'

Deshalb sollten Sie die Regeln zur Kennzeichnung beachten. wenn möglich. Wenn dies für einen bestimmten können Sie mit einer alternativen Syntax für Klammern festlegen und auf stringbasierte Objektschlüssel, die nicht den Kennzeichnungsregeln entsprechen.

Klammernschreibweise

Bei der Notation für eckige Klammern werden Klammern ([]) verwendet, die einen Wert enthalten, der ausgewertet wird ein String (oder ein Symbol), das das Property-Schlüssel.

const myObj = {
    "myProp": "String value."
};

myObj["myProp"];
> "String value."

Diese Syntax ist wesentlich großzügiger und möglicherweise auch ausreichend großzügiger. verwirrend sein, da der Wert in Klammern als Stringliteral ausgewertet wird unabhängig vom Datentyp. In diesem Beispiel sind der boolesche Wert false und der Der Zahlenwert 10 wird für den Zugriff auf Eigenschaften verwendet, die mit dem String verknüpft sind. Literalschlüssel "false" und "10" :

const myObj = {
    "false": 25,
    "10" : true,
    "key with spaces": true
};

myObj[false];
> 25

myObj[10];
> true

myObj["key with spaces"];
> true

Die Stärke dieser Syntax liegt in ihrer Flexibilität, da sie die Verwendung von dynamisch erstellten Strings für den Zugriff auf Eigenschaften. Im folgenden Beispiel wird ein Zufallszahl, um eine der drei Eigenschaften eines Objekts auszuwählen:

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 die Klammer-Notation verwenden, um auf neue Properties mithilfe von Zuweisungsoperatoren konfigurieren:

const myObj = {};

myObj[ "myProp" ] = "String value.";

myObj;
> Object { myProp: "String value." }