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


394

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.


3
Juste pour intervenir, pas une réponse à votre question initiale (puisque vous avez eu beaucoup de bonnes explications jusqu'à présent), mais en termes de vitesse, il n'y a pas de différence à mentionner non plus: jsperf.com/dot-vs-square-brackets . Le test ci-dessus ne donne au mieux qu'une marge de 2% à chacun d'eux, ils sont au coude à coude.
involontaire


Cette question / réponse peut également être utilisée pour les clés UTF-8.
Peter Krauss

Réponses:


422

(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

45
Les exemples de code et la formulation du résumé semblent terriblement familiers. dev-archive.net/articles/js-dot-notation
Quentin

61
Pas besoin de réinventer la roue, n'est-ce pas? Le citer comme référence.
Aron Rotteveel

13
La notation par points
Dave Chen

4
en chrome 44 sur ma notation de support de machine est plus rapide
Austin France

2
@chenghuayang Lorsque vous souhaitez accéder à une propriété d'un objet dont la clé est stockée dans une variable, vous ne pouvez pas utiliser la notation par points.
Abdul

105

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.


12

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"].


Pourriez-vous nous en dire plus sur array.length? Vous dites que les propriétés accessibles par notation par points ne sont pas évaluées, donc dans le cas de array.length, cela ne nous donnerait-il pas une chaîne de "longueur" au lieu de la valeur évaluée, dans ce cas le nombre d'éléments dans le tableau? The elements in an array are stored in propertiesc'est ce qui me déroute. Qu'entendez-vous par stocké dans des propriétés? Quelles sont les propriétés? Dans ma compréhension, le tableau n'est qu'un tas de valeurs sans propriétés. S'ils sont stockés dans des propriétés, comment se fait-il que ce ne soit pas property: value/ tableau associatif?
Limpuls

Cette réponse est particulièrement précieuse car elle explique la différence entre les deux notations.
chessweb

11

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
}

Réponse utile. Merci.
Ilyas karim


8

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


6

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.


5

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).


4

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


1

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.


1

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.


Et il y a aussi des situations où la notation entre crochets n'est pas autorisée du tout, même si vous n'avez pas de tirets. Par exemple, vous pouvez écrire Math.sqrt(25), mais pas Math['sqrt'](25).
M. Lister

0

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.


0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.