JavaScript-Eigenschaftszugriff: Punktschreibweise vs. Klammern?

Question

Abgesehen von der offensichtlichen Tatsache, dass die erste Form eine Variable und nicht nur ein Zeichenkettenliteral verwenden könnte, gibt es irgendeinen Grund, das eine dem anderen vorzuziehen, und wenn ja, in welchen Fällen?

Im Code:

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

Kontext: Ich habe einen Codegenerator geschrieben, der diese Ausdrücke erzeugt, und ich frage mich, was vorzuziehen ist.

Answer 1

(Entnommen aus aquí .)

Die Notation in eckigen Klammern ermöglicht die Verwendung von Zeichen, die mit der Punktnotation nicht verwendet werden können:

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

einschließlich Nicht-ASCII-Zeichen (UTF-8), wie in myForm[""] ( weitere Beispiele ).

Zweitens ist die Notation in eckigen Klammern nützlich, wenn es um Eigenschaftsnamen, die auf vorhersehbare Weise variieren:

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

Zusammenfassung:

• Die Punktschreibweise lässt sich schneller schreiben und ist übersichtlicher zu lesen.
• Die Notation in eckigen Klammern ermöglicht den Zugriff auf Eigenschaften, die Sonderzeichen und die Auswahl von Eigenschaften über Variablen

---

Ein weiteres Beispiel für Zeichen, die nicht mit der Punktnotation verwendet werden können, ist Eigenschaftsnamen, die selbst einen Punkt enthalten .

Eine json-Antwort könnte zum Beispiel eine Eigenschaft namens bar.Baz .

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

Answer 2

Mit der Klammerschreibweise können Sie auf die in einer Variablen gespeicherten Eigenschaften nach Namen zugreifen:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x würde in diesem Fall nicht funktionieren.

Answer 3

Die beiden gängigsten Möglichkeiten, auf Eigenschaften in JavaScript zuzugreifen, sind ein Punkt und eckige Klammern. Beide value.x y value[x] Zugriff auf eine Eigenschaft auf Wert - aber nicht unbedingt auf dieselbe Eigenschaft. Der Unterschied besteht darin, wie x interpretiert wird. Bei Verwendung eines Punktes muss der Teil nach dem Punkt ein gültiger Variablenname sein, der die Eigenschaft direkt benennt. Bei Verwendung von eckigen Klammern wird der Ausdruck zwischen den Klammern ausgewertet, um den Eigenschaftsnamen zu ermitteln. Während value.x die Eigenschaft von value mit dem Namen "x" abruft, versucht value[x], den Ausdruck x auszuwerten und verwendet das Ergebnis als Eigenschaftsnamen.

Wenn Sie also wissen, dass die Eigenschaft, an der Sie interessiert sind, "Länge" heißt, sagen Sie value.length . Wenn Sie die Eigenschaft extrahieren möchten, die durch den Wert in der Variablen i , sagen Sie value[i] . Und da Eigenschaftsnamen eine beliebige Zeichenkette sein können, können Sie, wenn Sie auf eine Eigenschaft namens “2” o “John Doe” müssen Sie eckige Klammern verwenden: value[2] o value["John Doe"] . Dies ist der Fall, auch wenn Sie den genauen Namen der Immobilie im Voraus kennen, denn weder “2” noch “John Doe” ist ein gültiger Variablenname und kann daher nicht über die Punktnotation aufgerufen werden.

Im Falle von Arrays

Die Elemente in einem Array werden in Eigenschaften gespeichert. Da die Namen dieser Eigenschaften Zahlen sind und wir ihren Namen oft aus einer Variablen abrufen müssen, müssen wir die Klammersyntax verwenden, um auf sie zuzugreifen. Die Längeneigenschaft eines Arrays sagt uns, wie viele Elemente es enthält. Dieser Eigenschaftsname ist ein gültiger Variablenname, und wir kennen seinen Namen im Voraus, so dass man, um die Länge eines Arrays zu ermitteln, normalerweise schreibt array.length weil das einfacher zu schreiben ist als array["length"] .

Answer 4

Die Punktschreibweise funktioniert nicht mit einigen Schlüsselwörtern (wie new y class ) im Internetexplorer 8.

Ich hatte diesen Code:

//app.users is a hash
app.users.new = {
  // some code
}

Und das löst den gefürchteten "erwarteten Einrücker" aus (zumindest im IE8 unter Windows XP, andere Umgebungen habe ich nicht ausprobiert). Die einfache Lösung dafür ist der Wechsel zur Klammerschreibweise:

app.users['new'] = {
  // some code
}

Answer 5

Beide foo.bar y foo["bar"] auf ein Grundstück auf foo zugreifen, aber nicht unbedingt auf dasselbe Grundstück. Der Unterschied liegt darin, wie bar interpretiert wird. Bei Verwendung eines Punktes ist das Wort nach dem Punkt der wörtliche Name der Eigenschaft. Bei Verwendung von eckigen Klammern wird der Ausdruck zwischen den Klammern ausgewertet, um den Eigenschaftsnamen zu ermitteln. Während foo.bar holt die Eigenschaft des Wertes namens “bar” , foo["bar"] versucht, den Ausdruck "bar" und verwendet das in eine Zeichenkette konvertierte Ergebnis als Eigenschaftsname

Die Beschränkung der Punktnotation

wenn wir dieses Projekt nehmen:

const obj = {
  123: 'digit',
  123name: 'start with digit',
  name123: 'does not start with digit',
  $name: '$ sign',
  name-123: 'hyphen',
  NAME: 'upper case',
  name: 'lower case'
};

Zugriff auf ihr Eigentum in Punktnotation

obj.123;      //  SyntaxError
obj.123name;  //  SyntaxError
obj.name123;  //  'does not start with digit'
obj.$name;    //   '$ sign'
obj.name-123;  //  SyntaxError
obj.'name-123';//  SyntaxError
obj.NAME; //  'upper case'
obj.name; //  'lower case'

All dies ist jedoch kein Problem für die Klammerschreibweise:

obj['123'];     //  'digit'
obj['123name']; //  'start with digit'
obj['name123']; //  'does not start with digit'
obj['$name'];   //  '$ sign'
obj['name-123']; //  'does not start with digit'
obj['NAME']; //  'upper case'
obj['name']; //  'lower case'

Zugriff auf die Variable über Variable :

const variable = 'name';
const obj = {
  name: 'value'
};
// Bracket Notation
obj[variable]; //  'value'
// Dot Notation
obj.variable; // undefined