web-dev-qa-db-fra.com

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

Outre le fait évident que la première forme pourrait utiliser une variable et pas seulement un littéral de chaîne, existe-t-il une raison pour utiliser l'une sur 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.

javascriptsyntax
373
Mark Renouf

(Source: ici .)

La notation avec crochets permet l'utilisation de 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["ダ"] ( autres exemples ).

Deuxièmement, la notation entre crochets est utile pour traiter les 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 le nom de propriété qui contient lui-même 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
405
Aron Rotteveel

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.

101
naiquevin

La notation par points ne fonctionne pas avec certains mots clés (tels que new et class) dans Internet Explorer 8.

J'ai eu ce code:

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

Et cela déclenche le redouté "identificateur attendu" (du moins sur IE8 sous Windows XP, je n'ai pas essayé d'autres environnements). La solution simple consiste à passer à la notation entre crochets:

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

Les deux méthodes les plus courantes pour accéder aux propriétés en JavaScript sont les suivantes: avec un point et entre crochets. Les deux value.x and value[x] accèdent à une propriété à 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 elle nomme directement la propriété. Lorsque vous utilisez des crochets, l'expression entre les crochets est évaluée comme suit: récupère le nom de la propriété alors que value.x récupère la propriété de la valeur nommée "x", valeur [x] tente d'évaluer l'expression x et utilise le résultat comme nom de la propriété.

Donc, si vous savez que la propriété qui vous intéresse s’appelle "longueur", vous dites value.length. Si vous voulez extraire la propriété nommée par la valeur de la variable i, vous dites value[i]. Et comme les noms de propriété peuvent être n'importe quelle chaîne, si vous souhaitez accéder à une propriété nommée “2” ou “John Doe”, vous devez utiliser les crochets: value[2] or value["John Doe"]. C'est le cas même si vous connaissez le nom exact de la propriété à l'avance, car ni “2” nor “John Doe” n'est un nom de variable valide et ne peut donc pas être accédé par la notation par points.

En cas de tableaux

Les éléments d'un tableau sont stockés dans des propriétés. Comme les noms de ces propriétés sont des nombres et que nous devons souvent obtenir leur nom d'une variable, nous devons utiliser la syntaxe entre 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. Nous connaissons son nom à l'avance. Pour trouver la longueur d'un tableau, vous devez généralement écrire array.length parce qu’il est plus facile d’écrire que array["length"].

8
Sagar Munjal

Soyez prudent lorsque vous utilisez ces notations: par exemple. si on veut 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

8
user2593104

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

6
CdB

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;

Autre que cela, 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 entendu, JavaScript ne comporte pas de tableaux associatifs).

5
Álvaro González

La notation entre crochets pouvant 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) Lors de l'utilisation d'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

3
Lev Stefanovich

Vous devez utiliser la notation entre crochets lorsque -

  1. Le nom de la propriété est un 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 attribué à 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
3
Harunur Rashid

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 telles que number et [] ou tout autre caractère spécial, par exemple -

var a = { 1 : 3 };

Maintenant, si vous essayez d'accéder comme a.1, cela se produira par le biais d'une erreur, car une chaîne est attendue.

1
Anshul

Permettez-moi d'ajouter quelques cas d'utilisation supplémentaires de la notation entre crochets. Si vous voulez accéder à une propriété disons x-proxy dans un objet, alors - sera interprété de manière erronée. Il existe également d’autres cas, comme l’espace, les points, etc., où le fonctionnement par points 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 aurez plus de contexte.

0
Manish Waran