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

Im Großen und Ganzen erfüllen sie die gleiche Aufgabe.
Dennoch bietet die Klammerschreibweise die Möglichkeit, Dinge zu tun, die mit der Punktschreibweise nicht möglich sind, wie z. B.

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

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

Answer 2

Sie müssen Klammern verwenden, wenn der Eigenschaftsname Sonderzeichen enthält:

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

Abgesehen davon ist es wohl nur eine Frage des Geschmacks. IMHO ist die Punktschreibweise kürzer und macht es offensichtlicher, dass es sich um eine Eigenschaft und nicht um ein Array-Element handelt (obwohl JavaScript natürlich sowieso keine assoziativen Arrays hat).

Answer 3

Seien Sie vorsichtig bei der Verwendung dieser Bezeichnungen: Wenn wir z.B. auf eine Funktion zugreifen wollen, 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'] 

o

window.parent.func 

um darauf zuzugreifen

Answer 4

Sie müssen die Notation in eckigen Klammern verwenden, wenn -

1. Der Name der Eigenschaft ist Nummer.

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

2. Der Eigenschaftsname hat ein 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 über diese Variable zugreifen.

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

Answer 5

Die Klammerschreibweise kann Variablen verwenden und ist daher in zwei Fällen nützlich, in denen die Punktschreibweise nicht funktioniert:

1) Wenn die Eigenschaftsnamen dynamisch bestimmt werden (wenn die genauen Namen erst zur Laufzeit bekannt sind).

2) Wenn Sie eine for..in-Schleife verwenden, um alle Eigenschaften eines Objekts durchzugehen.

Quelle: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects