Free Press

Zugriff auf Eigenschaften eines Objekts

Es gibt zwei Möglichkeiten, auf Eigenschaften eines Objekts zuzugreifen:

• Dot Notation
• Bracket Notation

Die Dot Notation wird am häufigsten verwendet. Nachfolgend werden wir uns mit jeder dieser Schreibweisen befassen und einige der Unterschiede entdecken.

Punktnotation

Schauen wir uns zunächst die Punktnotation an. Betrachten wir das folgende Beispiel:

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj.cat;console.log(sound);
// meow

Ich möchte Ihre Aufmerksamkeit auf die fünfte Zeile lenken, in der wir die Punktnotation verwenden: let sound = obj.cat;. Dies ist ein Beispiel für die Punktnotation. Sie können auf die Eigenschaften eines Objekts zugreifen, indem Sie den Namen des Objekts angeben, gefolgt von einem Punkt, gefolgt von dem Eigenschaftsnamen. Dies ist die Syntax: objectName.propertyName;.

Wenn Sie mit Punktnotation arbeiten, können Eigenschaftsbezeichnungen nur alphanumerisch sein (und _ und $). Eigenschaften können nicht mit einer Zahl beginnen.

Die Punktschreibweise ist viel einfacher zu lesen als die Klammerschreibweise und wird daher häufiger verwendet. Es gibt jedoch noch eine zweite Möglichkeit, auf Eigenschaften eines Objekts zuzugreifen, die Sie kennen sollten. Sie wird Klammerschreibweise genannt.

Klammerschreibweise

Hier ist ein Beispiel für Klammerschreibweise:

let obj = {
cat: 'meow',
dog: 'woof'
};let sound = obj;console.log(sound);
// meow

Auch hier sollten Sie Ihre Aufmerksamkeit auf die fünfte Zeile richten: let sound = obj;. Sie können auf die Eigenschaften eines Objekts zugreifen, indem Sie den Namen des Objekts, gefolgt von dem Eigenschaftsnamen in Klammern, angeben. Hier ist die Syntax: objectName.

Die Klammerschreibweise kennen Sie wahrscheinlich von der Arbeit mit Arrays. Im folgenden Beispiel greifen wir auf das zweite Element in unserem arr zu, indem wir die Syntax verwenden: arrayName

let arr = ;let letter = arr;console.log(letter);
// b

Aber die Klammerschreibweise ist auch nützlich, wenn man mit Objekten arbeitet.

Wenn man mit der Klammerschreibweise arbeitet, müssen Eigenschaftsbezeichner nur eine Zeichenfolge sein. Sie können beliebige Zeichen enthalten, auch Leerzeichen. Variablen können ebenfalls verwendet werden, solange die Variable in einen String aufgelöst wird.

Das bedeutet, dass es weniger Einschränkungen bei der Arbeit mit der Klammerschreibweise gibt. Wir können jetzt Leerzeichen in unseren Strings haben und können Strings sogar mit Zahlen beginnen.

Vielleicht am wichtigsten ist, dass wir jetzt Variablen verwenden können, um auf Eigenschaften in einem Objekt zuzugreifen. Es ist wichtig, dass die Variable, die Sie verwenden, auf einen String verweist.

Schauen Sie sich dieses Variablenbeispiel an. Es könnte anfangs etwas verwirrend sein, also haben Sie Geduld mit mir:

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj;console.log(sound);
// meow

Das obige Beispiel ähnelt einem früheren Beispiel, das wir bereits gesehen haben. Der Hauptunterschied besteht darin, dass wir jetzt die Klammerschreibweise verwenden, um eine Variable einzugeben. Vorsicht, es könnte so aussehen, als würden wir nach der Eigenschaft dog in unserem obj suchen, aber das ist nicht ganz korrekt. dog ist eine Variable mit einem Wert von 'cat'. Da wir Klammern verwenden, wird der String-Wert übergeben und wir suchen nach der Eigenschaft 'cat' – obj. So wird meow auf der Konsole protokolliert.

Nachfolgend versuchen wir dasselbe, aber mit Punktnotation:

let obj = {
cat: 'meow',
dog: 'woof'
};let dog = 'cat';
let sound = obj.dog;console.log(sound);
// woof

Auf Anhieb sollten Sie feststellen, dass wir woof zurückbekommen. Dies unterscheidet sich stark von dem anderen Beispiel, weil wir Variablen nicht in Punktschreibweise verwenden können. Wenn wir versuchen, obj.dog nachzuschlagen, suchen wir einfach nach dem String-Wert von 'dog' in unserem Objekt, anstatt den Wert der Variablen zu verwenden. So gibt obj.dog woof zurück.

Recap

Es gibt einige wichtige Unterschiede zwischen Punkt- und Klammerschreibweise:

Punktschreibweise:

• Eigenschaftsbezeichnungen können nur alphanumerisch sein (und _ und $)
• Eigenschaftsbezeichnungen können nicht mit einer Zahl beginnen.
• Eigenschaftsbezeichner können keine Variablen enthalten.
• OK – obj.prop_1, obj.prop$
• Nicht OK – obj.1prop, obj.prop name

Klammerschreibweise:

• Eigenschaftsbezeichner müssen ein String oder eine Variable sein, die auf einen String verweist.
• Es ist in Ordnung, Variablen, Leerzeichen und Strings zu verwenden, die mit Zahlen beginnen
• OK – obj, obj

Danke fürs Lesen! Wenn Sie bereit sind, endlich Web-Entwicklung zu lernen, lesen Sie The Ultimate Guide to Learning Full Stack Web Development in 6 months, für $30. Wenn du nur deine JavaScript-Kenntnisse verbessern willst, schau dir das an: A Beginners Guide to Advanced JavaScript

Ich veröffentliche jede Woche 4 Artikel über Webentwicklung. Bitte tragen Sie hier Ihre E-Mail-Adresse ein, wenn Sie in meine wöchentliche E-Mail-Liste aufgenommen werden möchten, oder folgen Sie mir auf Twitter.