web-dev-qa-db-fra.com

Différence entre l'utilisation de la notation crochet (`[]`) et la notation pointée (`.`)

Quelle est la différence réelle entre l'utilisation de [] et . pour accéder aux propriétés d'un tableau ou d'un objet? Lequel utiliser? 

Aussi, pourquoi l'opérateur . n'autorise-t-il pas la propriété index?

javascriptsyntax
19
Maizere Pathak.Nepal

L'accès aux membres avec . s'appelle notation par points. Leur accès avec [] s'appelle notation entre crochets.

La notation par points ne fonctionne qu'avec les noms de propriétés valides noms d'identifiant  [spec] , donc tout nom qui serait aussi un nom de variable valide (un identifiant} valide, voir aussi Quels caractères sont valides pour les noms de variables JavaScript? ) et aucun mot-clé réservé [spec] .

La notation entre crochets attend une expression qui correspond à une chaîne (ou peut être contrainte à une chaîne). Vous pouvez donc utiliser toute séquence de caractères comme nom de propriété. Il n'y a pas de limites à ce qu'une chaîne peut contenir.

Exemples:

obj.foo;  // valid
obj.else  // valid, reserved keywords are valid identifier names
obj.42    // invalid, identifier names cannot start with numbers
obj.3foo  // invalid,                ""
obj.foo-bar // invalid, `-` is not allowed in identifier names

obj[42]   // valid, 42 will be coerced to "42"
obj["--"] // valid, any character sequence is allowed
obj[bar]  // valid, will evaluate the variable `bar` and 
          // use its value as property name

Utilise la notation entre crochets:

  • Lorsque le nom de la propriété est contenu dans une variable, par ex. obj[foo].
  • Le nom de la propriété contient des caractères non autorisés dans les identificateurs, par exemple. commence par un chiffre†, ou contient un espace ou un tiret (-), par ex. obj["my property"].

Utilise la notation par points: Dans toutes les autres situations. 

Il y a un caveat concernant les mots-clés réservés. Bien que la spécification permette de les utiliser comme noms de propriété et avec la notation pointée, tous les navigateurs ou outils ne respectent pas cela (notamment les anciennes versions IE). Donc, la meilleure solution à mon avis est d'éviter d'utiliser des mots-clés réservés pour les noms de propriété ou d'utiliser la notation entre crochets si vous ne le pouvez pas.

†: C'est aussi la raison pour laquelle vous ne pouvez utiliser la notation entre crochets que pour accéder aux éléments d'un tableau. Les identifiants ne peuvent pas commencer par des chiffres et ne peuvent donc pas se composer que de chiffres.

45
Felix Kling

Vous devez utiliser . lorsque vous connaissez le nom de la propriété.

var object = {};
object.property = 'whatever';

, utilisez [] lorsque le nom de la propriété est contenu dans une variable

var object = {};
var property = 'another-property';
object[property] = 'whatever';

Avec @DCoder ajouté, il est impossible d'accéder à certaines propriétés d'objet sans utiliser la notation [] car leur nom enfreint la syntaxe. Par exemple. propriétés nommées class, default ou data-prop-value

6
Alberto Zaccagni

Aussi pourquoi pas. opérateur permet la propriété index? Je veux vraiment Une raison complète. Je vous remercie.

Eh bien, si cela était possible, considérez:

var a = 0.5;

Voulez-vous dire le numéro 0.5 ou accéder à l'élément 5 du numéro? Voir:

Number.prototype[5] = 3;

0[5] //3
0.5 // 0.5

Si vous avez autorisé la syntaxe 0.5 à être égale à 0[5], comment savez-vous ce que vous voulez dire?

Il est cependant possible d'utiliser directement des nombres avec le littéral d'objet:

var a = {
    0: 3,
    1: 5
};
5
Esailija

L'opérateur point et l'opérateur index (notation entre crochets) permettent d'accéder à la propriété d'un objet. Généralement, l'accès avec l'opérateur point est plus rapide, car l'accès aux variables par fenêtre est considérablement plus lent. Mais en cas de caractère spécial Dans les variables, vous ne pouvez pas utiliser l'opérateur de points, car cela donnerait une erreur. Dans de tels cas, nous devons utiliser l'opérateur d'index et transmettre le nom de la variable sous forme de chaîne, ce qui signifie une sous-citation minuscule, sans quoi une erreur indéfinie sera générée. E.g- 

var abc = {
    font-size : "12px"
} 
Using dot operator - abc.font-size;           //it will give error (Incorrect)
Using index operator - abc["font-size"];      //12px (Correct)
0
Vivek Mehta