web-dev-qa-db-fra.com

Comment créer une clé dynamique à ajouter à une variable d'objet JavaScript

J'essaie quelque chose comme ça, mais cet exemple ne fonctionne pas.

jsObj = {};

for (var i = 1; i <= 10; i++) {
    jsObj{'key' + i} = 'example ' + 1;
}

Que puis-je faire pour créer une clé dynamique comme celle-ci?

javascriptobject
185
Ryan

Crochets:

jsObj['key' + i] = 'example' + 1;

En JavaScript, tous les tableaux sont des objets, mais tous les objets ne sont pas des tableaux. La principale différence (et qui est assez difficile à imiter avec du JavaScript pur et des objets simples) est que les instances de tableau conservent la propriété length de sorte qu’elle en reflète un plus la valeur numérique de la propriété dont le nom est numérique et dont la valeur, lorsqu’il est converti en nombre, il s’agit de la plus grande de ces propriétés. Cela semble vraiment bizarre, mais cela signifie simplement que, dans une instance de tableau, les propriétés portant des noms tels que "0", "5", "207", etc., sont toutes traitées de manière spécifique dans la mesure où elles existent. détermine la valeur de length. Et en plus de cela, la valeur de length peut être définie sur remove ces propriétés. Définir la length d'un tableau sur 0 supprime effectivement toutes les propriétés dont le nom ressemble à un nombre entier.

OK, c'est ce qui rend un tableau spécial. Cependant, tout cela n’a rien à voir avec le fonctionnement de l’opérateur JavaScript [ ]. Cet opérateur est un mécanisme d'accès à la propriété d'objet qui fonctionne sur n'importe quel objet. Il est important de noter à cet égard que les noms de propriétés de tableaux numériques ne sont pas particuliers en ce qui concerne l'accès aux propriétés simples. Ce ne sont que des chaînes qui ressemblent à des nombres, mais les noms de propriété d'objet JavaScript peuvent être n'importe quelle chaîne.

Ainsi, la façon dont l'opérateur [ ] fonctionne dans une boucle for itérant dans un tableau:

for (var i = 0; i < myArray.length; ++i) {
  var value = myArray[i]; // property access
  // ...
}

n'est vraiment pas différent de la façon dont [ ] fonctionne lors de l'accès à une propriété dont le nom est une chaîne calculée:

var value = jsObj["key" + i];

L'opérateur [ ] effectue la même chose dans les deux cas. Le fait que dans un cas l'objet impliqué se trouve être un tableau n'a pas d'importance, en d'autres termes.

Lorsque définit des valeurs de propriété à l'aide de [ ], le récit est identique à l'exception de pour le comportement spécial concernant le maintien de la propriété length. Si vous définissez une propriété avec une clé numérique sur une instance de tableau:

myArray[200] = 5;

alors (en supposant que "200" soit le nom de propriété numérique le plus grand), la propriété length sera mise à jour sur 201 en tant qu'effet secondaire de l'attribution de propriété. Si la même chose est faite pour un objet simple, cependant:

myObj[200] = 5;

il n'y a pas d'effet secondaire. La propriété appelée "200" du tableau et de l'objet sera définie sur la valeur 5, sinon exactement de la même manière.

On pourrait penser que, parce que le comportement length est pratique, vous pouvez également créer toutes les occurrences du constructeur Array au lieu de objets simples. Il n’ya rien de mal à cela (bien que cela puisse être déroutant, en particulier pour les personnes familiarisées avec certaines autres langues, que certaines propriétés soient incluses dans la length mais pas d’autres). Cependant, si vous travaillez avec la sérialisation JSON (chose assez commune), sachez que les instances de tableau sont sérialisées en JSON de manière à ce que uniquement implique la propriétés numérotées. Les autres propriétés ajoutées au tableau n'apparaîtront jamais dans le formulaire JSON sérialisé. Donc par exemple:

var obj = [];
obj[0] = "hello world";
obj["something"] = 5000;

var objJSON = JSON.stringify(obj);

la valeur de "objJSON" sera une chaîne contenant seulement ["hello world"]; la propriété "quelque chose" sera perdue.

ES2015:

Si vous pouvez utiliser les fonctionnalités JavaScript de ES6, vous pouvez utiliser noms de propriétés calculées pour gérer cela très facilement:

var key = 'DYNAMIC_KEY',
    obj = {
        [key]: 'ES6!'
    };

console.log(obj);
// > { 'DYNAMIC_KEY': 'ES6!' }
412
Pointy

Les tableaux associatifs en JavaScript ne fonctionnent pas vraiment comme dans les autres langues. Les instructions for each sont compliquées (car elles énumèrent les propriétés de prototype héritées). Vous pouvez déclarer des propriétés sur un objet/un tableau associatif comme indiqué par Pointy, mais pour ce genre de chose, vous devez utiliser un tableau avec la méthode Push:

jsArr = []; 

for (var i = 1; i <= 10; i++) { 
    jsArr.Push('example ' + 1); 
}

N'oubliez pas que les tableaux indexés sont basés sur zéro, le premier élément sera donc jsArr [0], pas jsArr [1].

3
Andy E