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

Question

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 ?

Answer 1

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 (qu'il est difficile d'imiter avec du JavaScript pur et simple et des objets ordinaires) est que les instances de tableaux maintiennent la valeur de l'attribut length de façon à ce qu'elle reflète un plus la valeur numérique de la propriété dont le nom est numérique et dont la valeur, lorsqu'elle est convertie en un nombre, est la plus grande de toutes ces propriétés. Cela semble vraiment bizarre, mais cela signifie simplement que, pour une instance de tableau, les propriétés portant des noms comme "0" , "5" , "207" et ainsi de suite, font l'objet d'un traitement particulier en ce sens que leur existence détermine la valeur de length . Et, en plus de cela, la valeur de length peut être set a supprimer de telles propriétés. La fixation de la length d'un tableau à 0 supprime effectivement toutes les propriétés dont le nom ressemble à un nombre entier.

OK, c'est donc ce qui rend un tableau spécial. Cependant, tout cela n'a rien à voir avec la façon dont le JavaScript [ ] l'opérateur travaille. Cet opérateur est un mécanisme d'accès aux propriétés d'un objet qui fonctionne sur n'importe quel objet. Il est important de noter à cet égard que les noms de propriétés des tableaux numériques n'ont rien de spécial en ce qui concerne l'accès simple aux propriétés. Ce sont juste des chaînes de caractères qui ressemblent à des nombres, mais les noms de propriétés d'objets JavaScript peuvent être n'importe quel type de chaîne de caractères.

Ainsi, la façon dont le [ ] L'opérateur travaille dans un for boucle itérant dans un tableau :

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

n'est pas vraiment 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];

El [ ] L'opérateur fait précisément la même chose dans les deux cas. En d'autres termes, le fait que, dans un cas, l'objet concerné soit un tableau n'a pas d'importance.

Lorsque paramètre les valeurs des propriétés en utilisant [ ] l'histoire est la même excepto pour le comportement spécial autour du maintien de la length propriété. 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" est le plus grand nom de propriété numérique) le length sera mis à jour en 201 comme un effet secondaire de l'affectation de la propriété. Si la même chose est faite à un objet ordinaire, cependant :

myObj[200] = 5;

il n'y a pas de tels effets secondaires. La propriété appelée "200" du tableau et de l'objet prendra la valeur suivante 5 de la même façon.

On pourrait penser que parce que length est assez pratique, vous pourriez aussi bien faire tous des objets instances du constructeur Array au lieu d'objets ordinaires. Il n'y a rien de mal à cela (bien qu'il puisse être déroutant, surtout pour les personnes familières avec d'autres langages, que certaines propriétés soient incluses dans le constructeur d'objets length mais pas les autres). Cependant, si vous travaillez avec la sérialisation JSON (une chose assez courante), comprenez que les instances de tableau sont sérialisées en JSON d'une manière qui uniquement implique les propriétés nommées numériquement. Les autres propriétés ajoutées au tableau n'apparaîtront jamais dans la forme sérialisée JSON. Ainsi, 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 êtes en mesure d'utiliser les fonctionnalités de l'ES6 JavaScript, vous pouvez utiliser Noms de propriétés calculés pour gérer cela très facilement :

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

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

Answer 2

Les tableaux associatifs en JavaScript ne fonctionnent pas vraiment de la même manière que dans les autres langages. for each sont compliquées (car elles énumèrent les propriétés des prototypes hérités). Vous pourriez déclarer des propriétés sur un objet/un tableau associatif comme l'a mentionné Pointy, mais pour ce genre de choses, vous devriez vraiment utiliser un tableau avec la fonction push méthode :

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], et non jsArr[1].