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

outre le fait évident que la première forme pourrait utiliser une variable et pas seulement une chaîne littérale, y a-t-il une raison d'utiliser l'une par rapport à l'autre, et si oui, dans quels cas?

dans le 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.

338
demandé sur Paul Roub 2011-02-11 14:21:46

11 réponses

(source de ici .)

notation de crochet carré permet l'utilisation de caractères qui ne peuvent pas être utilisés avec la notation de point:

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

Deuxièmement, la notation à crochets est utile lorsqu'il s'agit noms de propriétés qui varient d'une 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.
  • notation de support carré permet d'accéder aux propriétés contenant caractères spéciaux et sélection de propriétés utilisant les variables

un autre exemple de caractères qui ne peuvent pas être utilisés avec la notation de 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
365
répondu Aron Rotteveel 2017-08-10 06:19:45

la notation bracket vous permet d'accéder aux propriétés nominatives 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.

87
répondu naiquevin 2013-09-24 14:54:11

Dot notation ne fonctionne pas avec certains mots-clés (comme new et class ) dans internet explorer 8.

j'avais ce code:

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

et cela déclenche le redoutable" 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 de support:

app.users['new'] = {
  // some code
}
8
répondu Benjamin Crouzier 2013-10-04 09:26:15

faites attention en utilisant ces notations: Pour eg. si nous voulons accéder à une fonction présente dans la parent d'une fenêtre. In IE:

window['parent']['func']

n'est pas équivalent à

window.['parent.func']

nous pouvons utiliser:

window['parent']['func'] 

ou

window.parent.func 

pour y accéder

8
répondu user2593104 2014-04-25 07:11:26

en général, ils font le même travail.

Néanmoins, la notation bracket vous donne l'occasion de faire des choses que vous ne pouvez pas faire avec la notation point, comme

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

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

6
répondu CdB 2011-02-11 11:32:28

vous devez utiliser des parenthèses si les noms de propriété a 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. IMHO, la notation des points est plus courte et cela rend plus évident qu'il s'agit d'une propriété plutôt que d'un élément de tableau (bien que JavaScript n'ait pas de tableaux associatifs de toute façon).

4
répondu Álvaro González 2016-02-29 17:19:25

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é. Lorsqu'on utilise un point, la partie qui suit le point doit être un nom de variable valide, et elle nomme directement la propriété. En utilisant des crochets, l'expression entre les crochets est évaluée pour obtenir le nom de la propriété. Alors que la valeur.x récupère le propriété de valeur nommée "x", value[x] tente 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", vous dites value.length . Si vous voulez extraire la propriété nommée par la valeur dans la variable i , vous dites value[i] . Et parce que les noms de propriétés peuvent être n'importe quelle chaîne, si vous voulez accéder à une propriété appelée “2” ou “John Doe” , vous devez utilisez les 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, parce que ni “2” nor “John Doe” n'est un nom de variable valide et ne peut donc pas être accédé par la notation de points.

dans le cas de tableaux

les éléments d'un tableau sont stockés dans des propriétés. Parce que les noms de ces propriétés sont des nombres et nous avons souvent besoin d'obtenir leur nom d'un variable, nous devons utiliser la syntaxe des crochets pour y accéder. La propriété length d'un tableau nous indique combien 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 typiquement array.length parce que c'est plus facile à écrire que array["length"] .

4
répondu Sagar Munjal 2017-07-18 17:47:49

Notation entre parenthèses peut utiliser des variables, il 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'Un for..in loop 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
répondu Lev Stefanovich 2014-02-19 01:52:52

au Cas où [] la notation est utile :

si votre objet est dynamique et il pourrait y avoir des valeurs aléatoires dans les touches comme 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 il le fera par une erreur, parce qu'il attend une chaîne de caractères là-bas.

0
répondu Anshul 2016-12-09 13:42:13

Permettez-moi d'ajouter un autre cas d'utilisation de la notation à crochets. Si vous voulez accéder à une propriété en disant x-proxy dans un objet, alors - sera mal interprété. Leurs sont quelques autres cas trop comme l'espace, le point, etc., où l'opération dot ne vous aidera pas. En outre, si u a la clé dans une variable, alors la seule façon d'accéder à la valeur de la clé dans un objet se fait par notation entre parenthèses. Espérons que vous obtenir un peu plus de contexte.

0
répondu Manish Waran 2017-05-01 04:43:00

Vous devez utiliser la notation crochets lorsqu' -

  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 assigné à une variable et vous voulez 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

0
répondu Harunur Rashid 2018-06-07 09:59:47