Accès à la propriété JavaScript: notation par points vs parenthèses?

Question

Mis à part le fait évident que la première forme pourrait utiliser une variable et pas seulement une chaîne de caractères, y a-t-il une raison d'utiliser l'une plutôt que l'autre, et si oui dans quels cas?

Dans du code:

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

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

// vs. 
var x = foo.bar;
 

Contexte: J'ai écrit un générateur de code qui produit ces expressions et je me demande ce qui est préférable.

Answer 1

Notation crochets permet d'utiliser les caractères qui ne peuvent pas être utilisés avec la notation point:

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

Le deuxième avantage de la notation crochets est lorsque vous traitez avec variable noms de propriété.

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

Roundup:

• La notation point est plus rapide à écrire et plus clair à lire.
• Notation crochets permet d'accéder à des propriétés qui contiennent caractères spéciaux et de sélection de en utilisant les propriétés des variables

Answer 2

La notation bracket vous permet d'accéder aux propriétés par nom stocké dans une variable:

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

obj.x ne fonctionnerait pas dans ce cas.

Answer 3

En général, ils font le même travail.
Néanmoins, la notation de parenthèse te donne l'occasion de faire des choses que vous ne pouvez pas faire avec la notation de point, comme

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

Cela peut être étendu à n'importe quelle propriété contenant des caractères spéciaux.

Answer 4

Vous devez utiliser des parenthèses si les noms de propriété ont des caractères spéciaux:

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

À part ça, je suppose que c'est juste une question de goût. À mon humble avis, la notation par points est plus courte et il est plus évident que c'est une propriété plutôt qu'un élément de tableau.

Answer 5

Soyez prudent lors de l'utilisation de ces notations: Par exemple. si nous voulons accéder à une fonction présente dans le parent d'une fenêtre. Dans IE:

 window['parent']['func']
 

n'est pas équivalent à

 window.['parent.func']
 

Nous pouvons soit utiliser:

 window['parent']['func'] 
 

ou

 window.parent.func 
 

pour y accéder