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

Outre le fait évident que le premier formulaire pourrait utiliser une variable et pas seulement un littéral de chaîne, y a-t-il une raison de les utiliser l'une par rapport à 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 lequel est préférable.

(Provenant d' ici .)

La notation entre crochets permet d'utiliser des caractères qui ne peuvent pas être utilisés avec la notation par points:

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

y compris les caractères non ASCII (UTF-8), comme dans myForm["ダ"]( plus d'exemples ).

Deuxièmement, la notation entre crochets est utile lorsqu'il s'agit de noms de propriété qui varient de manière prévisible:

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

Roundup:

• La notation par points est plus rapide à écrire et plus claire à lire.
• La notation entre crochets permet d'accéder aux propriétés contenant des caractères spéciaux et de sélectionner des propriétés à l'aide de variables

Un autre exemple de caractères qui ne peuvent pas être utilisés avec la notation par points est les noms de propriété qui contiennent eux-mêmes un point .

Par exemple, une réponse json peut contenir une propriété appelée bar.Baz.

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

La notation entre crochets vous permet d'accéder aux propriétés par nom stockées 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.

Les deux façons les plus courantes d'accéder aux propriétés en JavaScript sont avec un point et des crochets. Les deux value.x and value[x]accèdent à une propriété sur la valeur, mais pas nécessairement à la même propriété. La différence réside dans la façon dont x est interprété. Lorsque vous utilisez un point, la partie après le point doit être un nom de variable valide et il nomme directement la propriété. Lorsque vous utilisez des crochets, l'expression entre les crochets est évaluée pour obtenir le nom de la propriété. Alors que value.x récupère la propriété de la valeur nommée "x", value [x] essaie d'évaluer l'expression x et utilise le résultat comme nom de propriété.

Donc, si vous savez que la propriété qui vous intéresse s'appelle «longueur», dites-vous value.length. Si vous voulez extraire la propriété nommée par la valeur contenue dans la variable i, dites-vous value[i]. Et parce que les noms de propriété peuvent être une chaîne, si vous souhaitez accéder à une propriété nommée “2”ou “John Doe”, vous devez utiliser des crochets: value[2] or value["John Doe"]. C'est le cas même si vous connaissez le nom précis de la propriété à l'avance, car aucun “2” nor “John Doe”n'est un nom de variable valide et n'est donc pas accessible via la notation par points.

En cas de tableaux

Les éléments d'un tableau sont stockés dans des propriétés. Étant donné que les noms de ces propriétés sont des nombres et que nous devons souvent obtenir leur nom à partir d'une variable, nous devons utiliser la syntaxe des crochets pour y accéder. La propriété length d'un tableau nous indique le nombre d'éléments qu'il contient. Ce nom de propriété est un nom de variable valide, et nous connaissons son nom à l'avance, donc pour trouver la longueur d'un tableau, vous écrivez généralement array.lengthparce que c'est plus facile à écrire que array["length"].

La notation par points ne fonctionne pas avec certains mots clés (comme newet class) dans Internet Explorer 8.

J'avais ce code:

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

Et cela déclenche le redouté "indentifier attendu" (au moins sur IE8 sur windows xp, je n'ai pas essayé d'autres environnements). La solution simple pour cela est de passer à la notation entre crochets:

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

Soyez prudent lorsque vous utilisez 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

D'une manière générale, ils font le même travail.
Néanmoins, la notation entre crochets vous donne la possibilité de faire des choses que vous ne pouvez pas faire avec la notation par points, comme

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

Cela peut être étendu à toute propriété contenant des caractères spéciaux.

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

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

A 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 qu'il s'agit d'une propriété plutôt que d'un élément de tableau (bien que, bien sûr, JavaScript n'ait pas de tableaux associatifs de toute façon).

Vous devez utiliser la notation entre crochets lorsque -

1. Le nom de la propriété est le numéro.

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

2. Le nom de la propriété a un caractère spécial.

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

3. Le nom de la propriété est affecté à une variable et vous souhaitez accéder à la valeur de la propriété par cette variable.

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

La notation entre parenthèses peut utiliser des variables, elle est donc utile dans deux cas où la notation par points ne fonctionnera pas:

1) Lorsque les noms de propriété sont déterminés dynamiquement (lorsque les noms exacts ne sont pas connus avant l'exécution).

2) Lorsque vous utilisez une boucle for..in pour parcourir toutes les propriétés d'un objet.

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

Cas où la []notation est utile:

Si votre objet est dynamique et qu'il peut y avoir des valeurs aléatoires dans des clés comme numberet []ou tout autre caractère spécial, par exemple -

var a = { 1 : 3 };

Maintenant, si vous essayez d'accéder comme a.1il le fera par une erreur, car il attend une chaîne là-bas.

La notation par points est toujours préférable. Si vous utilisez un IDE ou un éditeur de texte "plus intelligent", il affichera des noms non définis de cet objet. Utilisez la notation entre parenthèses uniquement lorsque vous avez le nom avec des tirets similaires ou quelque chose de similaire invalide. Et aussi si le nom est stocké dans une variable.

Permettez-moi d'ajouter un autre cas d'utilisation de la notation entre crochets. Si vous voulez accéder à une propriété disons x-proxydans un objet, alors -sera mal interprété. Il y a aussi d'autres cas comme l'espace, le point, etc., où le fonctionnement du point ne vous aidera pas. De plus, si vous avez la clé dans une variable, le seul moyen d'accéder à la valeur de la clé dans un objet est la notation entre crochets. J'espère que vous obtenez un peu plus de contexte.

Un exemple où la notation par points échoue

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "😎":'😴',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["😎"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.😎);
console.log(json.a[]);

Les noms de propriété ne doivent pas interférer avec les règles de syntaxe de javascript pour que vous puissiez y accéder en tant que json.property_name