Créer des tableaux associatifs en JavaScript

1. Créer un tableau associatif en JavaScript à l’aide de l’objet Map
2. Créer un tableau associatif en JavaScript à l’aide d’objets génériques

La plupart des langages de programmation ont une structure de données qui vous permet de stocker des données dans un format clé-valeur. Par exemple, Python a des dictionnaires qui vous permettent d’associer une chaîne à une valeur ou une liste de valeurs.

JavaScript a l’objet Map qui réalise la même chose, gardez également à l’esprit que cette fonctionnalité n’est pas compatible avec les anciens navigateurs. Historiquement, des objets simples ont été utilisés pour créer des tableaux associatifs en JavaScript car ils font techniquement la même chose.

D’un autre côté, l’utilisation d’objets génériques à cette fin peut parfois être assez déroutante. Même la méthode Map a ses problèmes, surtout si vous êtes nouveau dans le langage et habitué à certaines conventions.

Créer un tableau associatif en JavaScript à l’aide de l’objet Map

La première et la plus correcte façon de gérer les tableaux associatifs en JavaScript est de créer un objet Map. Cette méthode présente plusieurs avantages par rapport aux objets ordinaires, comme le fait que les clés ne sont pas limitées aux chaînes - elles peuvent être des fonctions, d’autres objets et à peu près n’importe quelle autre primitive.

De plus, les objets Map sont également itérables dès le départ. Certes, vous pouvez itérer sur les propriétés d’un objet en utilisant une boucle for in, mais ce n’est pas toujours une solution élégante.

En tant que tel, voici comment vous pouvez créer et remplir un tableau associatif en JavaScript :

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log([...myMap]);

Production :

[["firstItem", 1], ["secondItem", 2], ["thirdItem", "third"]]

Pour créer des entrées clé/valeur, vous pouvez utiliser la méthode set(). En remarque, la syntaxe [...myMap] utilisée dans le code ci-dessus fonctionne car Map implémente une méthode @@iterator sous le capot. C’est ce qui le différencie des objets classiques puisqu’il faut créer une boucle for in explicite.

Si vous souhaitez récupérer une valeur spécifique, vous pouvez utiliser la méthode get() :

const myMap = new Map();

myMap.set('firstItem', 1);
myMap.set('secondItem', 2);
myMap.set('thirdItem', 'third');

console.log(myMap.get('firstItem'));

Production :

1

D’autres méthodes utiles incluent has(), qui vérifie si votre objet Map a une clé spécifique, et delete(), qui vous permet de supprimer des clés de l’objet.

Évitez d’utiliser la notation entre parenthèses lorsque vous traitez des objets Map en JavaScript

Nous savons tous que JavaScript regorge de comportements étranges, et les objets Map ne sont pas différents, malheureusement.

Si vous avez des connaissances en Python, vous pourriez être tenté d’utiliser quelque chose comme myMap["firstItem"] = 1 pour définir une paire clé/valeur Map. C’est également une approche valable lorsqu’il s’agit d’objets génériques.

La bonne nouvelle est que cela ne causera aucune erreur et que cela semblera fonctionner comme prévu au début. Voici l’exemple ci-dessus refactorisé à l’aide de la notation entre parenthèses :

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap);

Production :

[object Map] {
  firstItem: 1,
  secondItem: 2,
  thirdItem: "third"
}

La mauvaise nouvelle est qu’il ne s’agit plus du même type de structure de données. Au lieu de cela, cela a été transformé en un objet générique. Pour cette raison, si vous parcourez sur la Map, cela ne fonctionnera plus.

De plus, la méthode has() ne renverra pas non plus les résultats souhaités, comme vous pouvez le voir dans le code ci-dessous :

const myMap = new Map();

myMap['firstItem'] = 1;
myMap['secondItem'] = 2;
myMap['thirdItem'] = 'third';

console.log(myMap.has('firstItem'));

Production :

false

En conclusion, vous devriez éviter d’utiliser la notation entre parenthèses lorsqu’il s’agit de Map ; sinon, votre code pourrait ne pas fonctionner comme prévu.

Créer un tableau associatif en JavaScript à l’aide d’objets génériques

Jusqu’à il y a quelques années, la méthode Map décrite ci-dessus n’était pas compatible avec la plupart des navigateurs, les programmeurs utilisaient donc à la place des objets génériques. En théorie, il n’y a rien de mal à cette approche, mais vous devriez essayer d’utiliser Map dans la plupart des cas si la rétrocompatibilité n’est pas un problème.

Voici comment créer un tableau associatif en JavaScript à l’aide d’objets :

const myMap = {};

myMap.firstItem = 1;
myMap.secondItem = 2;
myMap.thirdItem = 'third';

console.log(myMap);

Production :

{ firstItem: 1, secondItem: 2, thirdItem: "third"}

Ici, nous avons utilisé la notation par points pour ajouter des propriétés à notre objet. Si vous aimez utiliser des chaînes comme clés, cette méthode ne fonctionnera pas comme prévu si vos chaînes contiennent des espaces.

Dans ces cas, vous pouvez utiliser la méthode des parenthèses comme détaillé ci-dessous :

const myMap = {};

myMap['first item'] = 1;
myMap['second item'] = 2;
myMap['third item'] = 'third';

console.log(myMap);

Production :

{ first item: 1, second item: 2, third item: "third"}

JavaScript accepte les deux méthodes peut à nouveau être extrêmement déroutant dans certains cas. Si vous voulez vraiment utiliser des chaînes comme clés dans vos tableaux associatifs, la notation par crochets est la voie à suivre car la notation par points est très restrictive.

D’un autre côté, la notation entre parenthèses fait que les objets JavaScript ressemblent beaucoup plus à des dictionnaires classiques, ce qu’ils ne sont pas. Ainsi, il est toujours préférable d’utiliser la méthode Map chaque fois que vous en avez l’occasion.