Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Map
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Un objetMap contient des paires de clé-valeur et mémorise l'ordre dans lequel les clés ont été insérées. N'importe quel type de valeur (primitive ou objet) peut être utilisée comme clé ou comme valeur.
Exemple interactif
const map1 = new Map();map1.set("a", 1);map1.set("b", 2);map1.set("c", 3);console.log(map1.get("a"));// Expected output: 1map1.set("a", 97);console.log(map1.get("a"));// Expected output: 97console.log(map1.size);// Expected output: 3map1.delete("b");console.log(map1.size);// Expected output: 2Description
Un objetMap permet de parcourir ses éléments selon leur ordre d'insertion. Par exemple, une bouclefor…of renverra un tableau[clé, valeur] pour chaque itération.
Égalité des clés
- L'égalité des clés est testée avec l'algorithme basé sur
sameValueZero NaNest considéré égal àNaN(bien que pour l'égalité stricte, on aNaN !== NaN) et toutes les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur===).- Dans la version actuelle de la spécification ECMAScript,
-0et+0sont considérées égaux même si ce n'était pas le cas dans les brouillons antérieurs. Voirle tableau de compatibilité pour plus de détails.
Comparaison entre objets etMap
Lesstructures objets sont similaires aux structuresMap, chacune permet d'associer des clés à des valeurs, de récupérer ces valeurs, de supprimer des clés, de détecter si une valeur est associée à une clé. Aussi, avant l'apparition deMap, on utilisait les objets pour représenter cette structure.
Toutefois, il existe des différences importantes qui font queMap se démarque et peut être préférable dans certains cas :
| `Map` | Objet | |
|---|---|---|
| Clés accidentelles | Un objetMap ne contient aucune clé par défaut. Il ne contient que ce qui y est explicitement placé. | Un objet Note : Avec ES5, il est possible de contourner ceci en utilisant |
| Types de clés | Pour une structureMap, les clés peuvent être n'importe quelle valeur (y compris des fonctions, des objets ou des valeurs primitives). | Les clés d'une structureObject doivent être une chaîne de caractères (String) ou un symbole (Symbol). |
| Ordre des clés | Les clés d'une structureMap sont triées selon leur ordre d'insertion. | Bien que les clés d'une structure L'ordre des propriétés propres d'un objet a été défini pour la première fois avec ECMAScript 2015. ECMAScript 2020 a défini l'ordre des propriétés héritées. Voir les opérations abstraitesOrdinaryOwnPropertyKeys etEnumerateObjectProperties qui sont décrites dans la spécification. On notera toutefois qu'aucun mécanisme ne parcourttoutes les propriétés d'un objet ; chaque mécanisme d'itération porte sur différents ensembles de propriétés : |
| Taille | Le nombre d'éléments d'une structureMap est facilement accessible avec la propriétésize. | Le nombre d'éléments d'une structureObject doit être déterminé manuellement. |
| Itération | Une structureMap est unitérable, et on peut donc le parcourir directement. |
Note :
|
| Performance | Meilleures performances pour les utilisations avec de nombreuses additions/suppressions de clés/valeurs. | Pas d'optimisation pour les utilisations avec de nombreuses additions/suppressions de clés/valeurs. |
| Sérialisation et désérialisation | Pas de prise en charge native pour la sérialisation ou la désérialisation. Il est toutefois possible de construire soi-même un mécanisme de sérialisation/désérialisation pour |
|
Ajouter des propriétés objet
Les structuresMap sont également des objets et il est donc possible de leur rajouter des propriétés objets. Attention toutefois, car cela peut être source de confusion.
Ainsi, on pourra faire :
const mauvaiseMap = new Map();mauvaiseMap["bla"] = "blaa";mauvaiseMap["bla2"] = "blaaa2";console.log(mauvaiseMap); // Map { bla: 'blaa', bla2: 'blaaa2' }Mais ces instructions n'interagissent pas avec la structureMap, elles ne font qu'ajouter des propriétés objet. La valeur associée à la clé"bla" n'est pas stockée dans laMap. Ainsi, si on utilise les méthodes deMap, cela échouera :
mauvaiseMap.has('bla'); // falsemauvaiseMap.delete('bla'); // falseconsole.log(mauvaiseMap), // Map { bla: 'blaa', bla2: 'blaaa2' }Pour stocker des données dans une structureMap, on utilisera plutôt la méthodeset(cle, valeur).
const contacts = new Map();contacts.set("Jessie", { phone: "01 99 00 12 34", address: "1 Rue de l'avenue",});contacts.has("Jessie"); // truecontacts.get("James"); // undefinedcontacts.set("James", { phone: "06 39 98 78 89", address: "3 Chemin du Parc" });contacts.get("Jessie"); // {phone: "01 99 00 12 34", address: "1 Rue de l'avenue"}contacts.delete("Miaouss"); // falsecontacts.delete("Jessie"); // trueconsole.log(contacts.size); // 1Constructeur
Map()Crée un nouvel objet
Map.
Propriétés statiques
get Map[@@species]La fonction de construction utilisée pour créer les objets dérivés.
Propriétés des instances
Map.prototype.sizeRenvoie le nombre de paires clé/valeur contenues dans l'objet
Map.
Méthodes des instances
Map.prototype.clear()Supprime toutes les paires de clé/valeur de l'objet
Map.Map.prototype.delete(var>cle</var>)Renvoie
truesi un élément existait dans l'objetMapet qu'il a été retiré, oufalsesi l'élément n'existe pas. Après cette opération,Map.prototype.has(cle)renverrafalse.Map.prototype.get(<var>cle</var>)Renvoie la valeur associée à la clé passée en argument, ou
undefineds'il n'y a pas de valeur pour cette clé.Map.prototype.has(<var>cle</var>)Renvoie un booléen indiquant s'il existe une valeur associée à la clé fournie par l'argument dans l'objet
Map.Map.prototype.set(<var>cle</var>, <var>valeur</var>)Définit une valeur pour la clé, indiquées par les arguments. Renvoie l'objet
Mapà jour.
Méthodes d'itération
Map.prototype[@@iterator]()Renvoie un nouvel objet itérateur qui contientun tableau de
[cle, valeur]pour chaque élément de l'objetMap, dans leur ordre d'insertion.Map.prototype.keys()Renvoie un nouvel objet itérateur qui contient lesclés pour chaque élément de l'objet
Map, dans leur ordre d'insertion.Map.prototype.values()Renvoie un nouvel objet itérateur qui contient lesvaleurs pour chaque élément de l'objet
Map, dans leur ordre d'insertion.Map.prototype.entries()Renvoie un nouvel objet itérateur qui contientun tableau de
[cle, valeur]pour chaque élément de l'objetMap, dans leur ordre d'insertion.Map.prototype.forEach(<var>fnRappel</var>[,<var>thisArg</var>])Appelle la fonction
fnRappelune fois pour chaque paire clé/valeur contenue dans l'objetMap, dans leur ordre d'insertion. Si un paramètrethisArgest fourni àforEach(), sa valeur sera utilisée comme valeur pourthislors de chaque appel.
Exemples
Utiliser un objetMap
const maMap = new Map();const objectKey = {}, functionKey = function () {}, stringKey = "une chaîne";// définir les valeursmaMap.set(stringKey, "valeur associée à 'une chaîne'");maMap.set(objectKey, "valeur associée à objectKey");maMap.set(functionKey, "valeur associée à functionKey");maMap.size; // 3// récupérer les valeursmaMap.get(stringKey); // "valeur associée à 'une chaîne'"maMap.get(objectKey); // "valeur associée à objetClé"maMap.get(functionKey); // "valeur associée à fonctionClé"maMap.get("une chaîne"); // "valeur associée à 'une chaîne'"// car chaineClé === 'une chaîne'maMap.get({}); // indéfini car objetClé !== {}maMap.get(function () {}); // indéfini car fonctionClé !== function () {}UtiliserNaN comme clé
NaN peut être utilisé comme une clé. Bien queNaN ne soit pas strictement égal à lui-même (NaN !== NaN vauttrue), on peut bâtir l'exemple suivant, car on ne peut pas distinguer deux valeursNaN :
const maMap = new Map();maMap.set(NaN, "not a number");maMap.get(NaN); // "not a number"const otherNaN = Number("toto");maMap.get(otherNaN); // "not a number"Parcourir des objetsMaps avecfor…of
Il est possible de parcourir les objetsMap grâce à des bouclesfor…of :
const maMap = new Map();maMap.set(0, "zéro");maMap.set(1, "un");for (const [key, value] of maMap) { console.log(`${key} = ${value}`);}// "0 = zéro"// "1 = un"for (const key of maMap.keys()) { console.log(key);}// 0// 1for (const value of maMap.values()) { console.log(valeur);}// zéro// unfor (const [key, value] of maMap.entries()) { console.log(`${key} = ${value}`);}// 0 = zéro// 1 = unParcourir des objetsMap avecforEach()
Il est aussi possible de parcourir des objetsMap avec la méthodeforEach() :
maMap.forEach(function (value, key) { console.log(`${key} = ${value}`);});// 0 = zéro// 1 = unRelation avec les objetsArray
const keyValuePair = [ ["clé1", "valeur1"], ["clé2", "valeur2"],];// On utilise le constructeur Map// pour transformer un tableau de clés/valeurs// en un objet Mapconst maMap = new Map(keyValuePair);maMap.get("clé1"); // renvoie "valeur1"// On utilise la fonction Array.from pour transformer// une map en un tableau de clés/valeursconsole.log(Array.from(maMap)); // affichera la même chose que tableauCléValeur// Avec une méthode plus concise grâce à la décompositionconsole.log([...maMap]);// On peut aussi l'utiliser pour n'extraire que les clés// ou les valeurs et créer le tableau associéconsole.log(Array.from(maMap.keys())); // affichera ["clé1", "clé2"]Cloner et fusionner des objetsMap
Il est possible de cloner desMap comme on clone des tableaux :
const original = new Map([[1, "un"]]);const clone = new Map(original);console.log(clone.get(1)); // unconsole.log(original === clone); // false. Utile pour une comparaison superficielleNote :La donnée contenue dans laMap n'est pas clonée.
Il est également possible de fusionner deuxMap en conservant le critère d'unicité sur les clés :
const premier = new Map([ [1, "un"], [2, "deux"], [3, "trois"],]);const second = new Map([ [1, "uno"], [2, "dos"],]);// On fusionne les deux maps. C'est la "dernière" version// de la clé qui l'emporte.// L'opérateur de décomposition nous permet principalement ici// de convertir une map en un tableauconst fusion = new Map([...premier, ...second]);console.log(fusion.get(1)); // unoconsole.log(fusion.get(2)); // dosconsole.log(fusion.get(3)); // troisIl est également possible de fusionner des objetsMap avec des objetsArray :
const premier = new Map([ [1, "un"], [2, "deux"], [3, "trois"],]);const second = new Map([ [1, "uno"], [2, "dos"],]);// On peut fusionner des Maps avec un tableau// Là encore c'est le dernier exemplaire de la clé qui l'emporteconst fusion = new Map([...premier, ...second, [1, "eins"]]);console.log(fusion.get(1)); // einsconsole.log(fusion.get(2)); // dosconsole.log(fusion.get(3)); // troisSpécifications
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-map-objects |
Compatibilité des navigateurs
Voir aussi
- Une prothèse d'émulation pour
Map, disponible avecla bibliothèquecore-js SetWeakMapWeakSet