L'objet Map représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur.

Syntaxe

new Map([itérable])

Paramètres

itérable
Un tableau (Array) ou tout autre objet itérable dont les éléments sont des paires clé/valeur (par exemple un tableau de la forme [[1 , "toto"],[2, "truc"]]). Chaque paire clé/valeur sera ajoutée au nouvel objet Map. null est traité comme undefined.

Description

Un objet Map permet de retrouver ses éléments dans leur ordre d'insertion. Par exemple, une boucle for...of renverra un tableau de [clé, valeur] pour chaque itération.

Égalité des clés

L'égalité des clés est testée avec l'algorithme basé sur l'égalité de valeurs :

  • NaN est considéré égal à NaN (bien que, pour l'égalité stricte NaN !== NaN)
  • les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur  ===).

Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) -0 et +0 étaient considérés différents (bien que -0 === +0), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26) (bug 952870) et une version nocturne de Chrome.

Comparaison entre objets et maps

Les objets sont similaires aux Maps, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des Maps. Malgré tout, il y a des différences importantes entre Objects et Maps qui permettent de distinguer une utilisation des objets Map plus efficace :

  • Un Object possède un prototype, il peut donc y avoir certaines clés par défaut qui peuvent entrer en collision avec les clés qu'on souhaite créer. On peut contourner cela en utilisant map = Object.create(null).
  • Les clés d'un Object sont des chaînes de caractères, alors que pour une Map ça peut être n'importe quelle valeur.
  • Il est possible d'obtenir facilement la taille d'une Map avec size. En revanche, pour un Object il faudra compter « manuellement ».
  • Un objet Map est un itérable et on peut donc le parcourir directement. En revanche, itérer sur un Object nécessite de récupérer ls clés de l'objet pour ensuite les parcourir.
  • Un objet Object possède un prototype et il peut donc y avoir des clés qui rentrent en collision si on n'y prête pas attention. À partir d'ES5, on peut écrire map = Object.create(null) mais cette formulation est rarement utilisée.
  • Un objet Map permettra d'obtenir de meilleures performances si on ajoute et supprime des éléments fréquemment.

Propriétés

Map.length
La valeur de la propriété length est 0.
get Map[@@species]
La fonction constructeur utilisée pour créer des objets dérivées.
Map.prototype
Représente le prototype du constructeur Map. Permet l'addition de propriétés à tous les objets Map.

Instances de Map

Toutes les instances de Map héritent de Map.prototype.

Propriétés

Méthodes

Exemples

Utiliser un objet Map

var maMap = new Map();

var objetClé = {},
    fonctionClé = function () {},
    chaineClé = "une chaîne";

// définir les valeurs
maMap.set(chaineClé, "valeur associée à 'une chaîne'");
maMap.set(objetClé, "valeur associée à objetClé");
maMap.set(fonctionClé, "valeur associée à fonctionClé");

maMap.size; // 3

// récupérer les valeurs
maMap.get(chaineClé);    // "valeur associée à 'une chaîne'"
maMap.get(objetClé);     // "valeur associée à objetClé"
maMap.get(fonctionClé);  // "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 () {}

Utiliser NaN comme clé

NaN peut être utilisé comme une clé. Bien que NaN ne soit pas strictement égal à lui-même (NaN !== NaN est vérifié), on peut bâtir l'exemple suivant car on ne peut pas distinguer deux valeurs NaN :

var maMap = new Map();
maMap.set(NaN, "not a number");

maMap.get(NaN); // "not a number"

var autreNaN = Number("toto");
maMap.get(autreNaN); // "not a number"

Parcourir des objets Maps avec for..of

Il est possible de parcourir les objets Map grâce à des boucles for..of :

var maMap = new Map();
maMap.set(0, "zéro");
maMap.set(1, "un");
for (var [clé, valeur] of maMap) {
  console.log(clé + " = " + valeur);
}
// On aura 2 lignes : la première avec "0 = zéro"
// la seconde avec "1 = un"

for (var clé of maMap.keys()) {
  console.log(clé);
}
// On aura 2 lignes : la première avec "0"
// et la seconde avec "1"

for (var valeur of maMap.values()) {
  console.log(valeur);
}
// On aura 2 lignes : la première avec "zéro"
// et la seconde avec "un"

for (var [clé, valeur] of maMap.entries()) {
  console.log(clé + " = " + valeur);
}
// On aura 2 lignes : la première avec "0 = zéro"
// la seconde avec "1 = un"

maMap.forEach(function(valeur, clé) {
  console.log(clé + " = " + valeur);
});
// On aura 2 lignes : la première avec "0 = zéro"
// la seconde avec "1 = un"

Relation avec les objets Array

var tableauCléValeur = [["clé1", "valeur1"], ["clé2", "valeur2"]];

// On utilise le constructeur Map
// pour transformer un tableau de clés/valeurs
// en un objet map
var maMap = new Map(tableauCléValeur);

maMap.get("clé1"); // renvoie "valeur1"

// On utilise la fonction Array.from pour transformer
// une map en un tableau de clés/valeurs
console.log(Array.from(maMap)); // affichera la même chose que tableauCléValeur

// 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"]

Spécifications

Spécification État Commentaires
ECMAScript 2015 (6th Edition, ECMA-262)
La définition de 'Map' dans cette spécification.
Standard Définition initiale.
ECMAScript Latest Draft (ECMA-262)
La définition de 'Map' dans cette spécification.
Standard évolutif  

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple38121311258
new Map(iterable)381213 Non259
new Map(null) Oui123711 Oui9
Map() without new throws Oui124211 Oui9
Key equality for -0 and 0381229 Non259
clear38121911258
delete38121311258
entries381220 Non258
forEach38122511258
get38121311258
has38121311258
keys381220 Non258
prototype38121311258
set381213111258
size381219211258
values381220 Non258
@@iterator Oui Oui

17 — 273

27 — 364 5

366

Non Oui Oui
@@species511341 Non3810
@@toStringTag44 Non Non Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple3838121411258
new Map(iterable)38381214 Non259
new Map(null) Oui Oui123711 Oui9
Map() without new throws Oui Oui124211 Oui9
Key equality for -0 and 038381229 Non259
clear3838121911258
delete3838121411258
entries38381220 Non258
forEach3838122511258
get3838121411258
has3838121411258
keys38381220 Non258
prototype3838121411258
set3838121411258
size38381219211258
values38381220 Non258
@@iterator Oui Oui Oui

17 — 273

27 — 364 5

366

Non Oui Oui
@@species51511341 Non3810
@@toStringTag4444 Non Non Non Non Non

1. Returns 'undefined' instead of the 'Map' object.

2. From Firefox 13 to Firefox 18, the size property was implemented as a Map.prototype.size() method, this has been changed to a property in later versions conform to the ECMAScript 2015 specification.

3. Supported as iterator.

4. A placeholder property named @@iterator is used.

5. Supported as @@iterator.

6. The @@iterator symbol is implemented.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, kdex, Pragmateek, lionel, Goofy, Ltrlg, Youle, teoli
 Dernière mise à jour par : SphinxKnight,