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, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire map = Object.create(null) mais cette formulation est rarement utilisée.
  • 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 les clés de l'objet pour ensuite les parcourir.
  • 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.
Projet  

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

36

27 — 363 4

17 — 275 6

Non Oui Oui
@@species511341 Non3810
@@toStringTag44 Non Non Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple38381214258 Oui
new Map(iterable)38381214259 Oui
new Map(null) Oui Oui1237 Oui9 Oui
Map() without new throws Oui Oui1242 Oui9 Oui
Key equality for -0 and 038381229259 Oui
clear38381219258 Oui
delete38381214258 Oui
entries38381220258 Oui
forEach38381225258 Oui
get38381214258 Oui
has38381214258 Oui
keys38381220258 Oui
prototype38381214258 Oui
set38381214258 Oui
size383812192258 Oui
values38381220258 Oui
@@iterator Oui Oui Oui

36

27 — 363 4

17 — 275 6

Oui Oui Oui
@@species5151134138105.0
@@toStringTag4444 Non Non Non Non4.0

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. A placeholder property named @@iterator is used.

4. Supported as @@iterator.

5. A placeholder property named iterator is used.

6. Supported as iterator.

Voir aussi

Étiquettes et contributeurs liés au document

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