JavaScript Map : stockage et recherche clé-valeur

Un objet JavaScript Map stocke des paires clé-valeur et permet d’utiliser n’importe quelle valeur comme clé : objets, fonctions ou primitives. Utilisez-le quand vous avez besoin d’itérer dans l’ordre d’insertion, d’utiliser des clés non textuelles, ou d’ajouter et supprimer des entrées fréquemment. Contrairement aux objets simples, les clés d’un Map ne sont pas affectées par les propriétés héritées du prototype, ce qui évite des surprises avec des clés dynamiques.

Exemple JavaScript Map pour le stockage clé-valeur

Sortie :

95
false
2

Comment cet exemple fonctionne

1. new Map() crée une map vide. Appeler Map() sans new déclenche une TypeError.
2. set ajoute une paire clé-valeur et renvoie l’instance Map, ce qui permet d’enchaîner les appels comme map.set("a", 1).set("b", 2). Appeler set avec une clé existante écrase la valeur sans modifier la position d’itération de cette clé.
3. get renvoie la valeur stockée, ou undefined si la clé est absente. Utilisez has pour distinguer une clé manquante d’une clé explicitement définie à undefined.
4. size reflète le nombre actuel d’entrées, contrairement aux objets qui nécessitent Object.keys(obj).length.

Erreurs courantes avec JavaScript Map

Utiliser la syntaxe entre crochets au lieu de set/get :

Faux :

const map = new Map();
map["clé"] = "valeur";
console.log(map.get("clé")); // undefined

Correct :

const map = new Map();
map.set("clé", "valeur");
console.log(map.get("clé")); // "valeur"

La syntaxe entre crochets définit une propriété d’objet sur l’instance Map, pas une entrée de Map. get, has et size l’ignorent.

Attendre une égalité structurelle pour les clés objet :

Faux :

const map = new Map();
map.set({id: 1}, "alice");
console.log(map.get({id: 1})); // undefined

Correct :

const cle = {id: 1};
map.set(cle, "alice");
console.log(map.get(cle)); // "alice"

Map utilise SameValueZero pour l’égalité des clés. Pour les objets, cela signifie identité par référence : deux littéraux d’objet visuellement identiques restent deux clés différentes.

JavaScript Map vs objet

Utilisez Map quand les clés ne sont pas des chaînes, quand les entrées sont ajoutées et supprimées souvent, ou quand vous stockez des clés non fiables. Utilisez un objet simple pour des enregistrements à structure fixe ou des données qui doivent être sérialisées en JSON. Si vous avez besoin d’un objet tout en évitant les collisions de clés du prototype, utilisez Object.create(null) comme objet sous-jacent.

FAQ

JavaScript Map préserve-t-il l’ordre d’insertion ?

Oui. Map itère les entrées dans l’ordre de leur première insertion. set() sur une clé existante met à jour la valeur mais garde la position d’origine. Supprimer une clé puis la réajouter la déplace à la fin.

JavaScript Map peut-il utiliser des objets comme clés ?

Oui, mais Map compare les clés objet par référence, pas par structure. Deux objets différents avec les mêmes propriétés sont traités comme des clés distinctes. Stockez la référence dans une variable et utilisez cette même référence pour set et get.

Comment convertir un JavaScript Map en objet ou en JSON ?

Appelez Object.fromEntries(map) pour créer un objet simple : cela fonctionne quand toutes les clés sont des chaînes ou des symboles. Pour des clés non textuelles, sérialisez le tableau d’entrées : JSON.stringify([...map]).

Quelle différence entre JavaScript Map et la fonction JavaScript map() ?

Map est une collection clé-valeur pour stocker et récupérer des données. La fonction JavaScript map() (Array.prototype.map) est une méthode de tableau qui renvoie un nouveau tableau en appliquant un callback à chaque élément. Ils partagent le même nom, mais servent des objectifs différents.