Zugriff auf JavaScript-Eigenschaften: Punktnotation vs. Klammern?

Abgesehen von der offensichtlichen Tatsache, dass die erste Form eine Variable und nicht nur ein Zeichenfolgenliteral verwenden könnte, gibt es einen Grund, eine über der anderen zu verwenden, und wenn ja, in welchen Fällen?

In 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, welcher besser ist.

(Quelle von Hier.)

Die Notation mit eckigen Klammern erlaubt die Verwendung von Zeichen, die nicht mit der Punktnotation 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["ダ"] (mehr Beispiele).

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

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

Zusammenfassen:

• Die Punktnotation ist schneller zu schreiben und klarer zu lesen.
• Die Notation mit eckigen Klammern ermöglicht den Zugriff auf Eigenschaften, die Sonderzeichen enthalten, und die Auswahl von Eigenschaften mithilfe von Variablen

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

Beispielsweise könnte eine JSON-Antwort eine Eigenschaft namens enthalten bar.Baz.

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

Die Klammernotation ermöglicht Ihnen den Zugriff auf Eigenschaften nach Namen, die in einer Variablen gespeichert sind:

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.

Die beiden gängigsten Möglichkeiten, auf Eigenschaften in JavaScript zuzugreifen, sind mit einem Punkt und mit eckigen Klammern. Beide value.x und value[x] Greifen Sie nach Wert auf eine Eigenschaft zu – aber nicht unbedingt auf dieselbe Eigenschaft. Der Unterschied besteht darin, wie x interpretiert wird. Wenn Sie einen Punkt verwenden, muss der Teil nach dem Punkt ein gültiger Variablenname sein und benennt die Eigenschaft direkt. Bei Verwendung von eckigen Klammern wird der Ausdruck zwischen den Klammern ausgewertet, um den Eigenschaftsnamen zu erhalten. Während value.x die Eigenschaft von value namens „x“ abruft, value[x] versucht, den Ausdruck x auszuwerten und verwendet das Ergebnis als Eigenschaftsnamen.

Wenn Sie also wissen, dass die Eigenschaft, die Sie interessiert, „Länge“ heißt, sagen Sie value.length. Wenn Sie die durch den in der Variablen enthaltenen Wert benannte Eigenschaft extrahieren möchten idu sagst value[i]. Und weil Eigenschaftsnamen eine beliebige Zeichenfolge sein können, wenn Sie auf eine Eigenschaft mit dem Namen zugreifen möchten “2” oder “John Doe”müssen Sie eckige Klammern verwenden: value[2] oder value["John Doe"]. Dies ist der Fall, obwohl 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 Fall 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 beziehen 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. Um also die Länge eines Arrays zu ermitteln, schreiben Sie normalerweise array.length denn das ist einfacher zu schreiben als array["length"].

Die Punktnotation funktioniert bei einigen Schlüsselwörtern nicht (wie z new und class) im Internetexplorer 8.

Ich hatte diesen Code:

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

Und dies löst den gefürchteten “erwarteten Bezeichner” aus (zumindest auf IE8 unter Windows XP, ich habe keine anderen Umgebungen ausprobiert). Die einfache Lösung dafür besteht darin, zur Klammernotation zu wechseln:

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

Im Allgemeinen machen sie die gleiche Arbeit.
Trotzdem gibt Ihnen die Klammernotation die Möglichkeit, Dinge zu tun, die Sie mit der Punktnotation nicht tun können, wie z

var x = elem["foo[]"]; // can't do elem.foo[];

Dies kann auf jede Eigenschaft erweitert werden, die Sonderzeichen enthält.

Seien Sie vorsichtig bei der Verwendung dieser Notationen: Für zB. wenn wir auf eine Funktion zugreifen möchten, die im Elternteil eines Fensters vorhanden ist. Im IE:

window['parent']['func']

ist nicht gleichbedeutend mit

window.['parent.func']

Wir können entweder verwenden:

window['parent']['func'] 

oder

window.parent.func 

um darauf zuzugreifen

Sie müssen die Notation mit eckigen Klammern verwenden, wenn –

1. Der Eigenschaftsname ist Zahl.

   var ob = {
     1: 'One',
     7 : 'Seven'
   }
   ob.7  // SyntaxError
   ob[7] // "Seven"
   

2. Der Eigenschaftsname hat Sonderzeichen.

   var ob = {
     'This is one': 1,
     'This is seven': 7,
   }  
   ob.'This is one'  // SyntaxError
   ob['This is one'] // 1
   

3. Der Eigenschaftsname ist einer Variablen zugewiesen und Sie möchten über diese Variable auf den Eigenschaftswert zugreifen.

   var ob = {
     'One': 1,
     'Seven': 7,
   }
   
   var _Seven = 'Seven';
   ob._Seven  // undefined
   ob[_Seven] // 7