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.

On notera qu'un objet Map contenant des objets ne sera parcouru que dans l'ordre d'insertion de ces objets. Avec ES2015, l'ordre d'itération est fixé pour les objets. Toutefois, pour les versions antérieures d'ECMAScript, cet ordre n'est pas garanti.

É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'une Map sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une Map, on obtient les clés selon leur ordre d'insertion.
  • 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"]

Cloner et fusionner des objets Map

Il est possible de cloner des Map comme on clone des tableaux :

var original = new Map([
  [1, 'un']
]);

var clone = new Map(original);

console.log(clone.get(1)); // un
console.log(original === clone); // false. Utile pour une comparaison superficielle

Attention, la donnée contenue dans la Map n'est pas clonée.

Il est également possible de fusionner deux Map en conservant le critère d'unicité sur les clés :

var premier = new Map([
  [1, 'un'],
  [2, 'deux'],
  [3, 'trois'],
]);

var 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 tableau
var fusion = new Map([...premier, ...second]);

console.log(fusion.get(1)); // uno
console.log(fusion.get(2)); // dos
console.log(fusion.get(3)); // trois

Il est également possible de fusionner des objets Map avec des objets Array :

var premier = new Map([
  [1, 'un'],
  [2, 'deux'],
  [3, 'trois'],
]);

var 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'emporte
var fusion = new Map([...premier, ...second, [1, 'eins']]);

console.log(fusion.get(1)); // eins
console.log(fusion.get(2)); // dos
console.log(fusion.get(3)); // trois

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

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung InternetNode.js
Support simpleChrome Support complet 38Edge Support complet 12Firefox Support complet 13IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 14Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
Support complet 0.12
Support complet 0.10
Désactivée
Désactivée From version 0.10: this feature is behind the --harmony runtime flag.
new Map(iterable)Chrome Support complet 38Edge Support complet 12Firefox Support complet 13IE Aucun support NonOpera Support complet 25Safari Support complet 9WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 14Opera Android Support complet 25Safari iOS Support complet 9Samsung Internet Android Support complet Ouinodejs Support complet 0.12
new Map(null)Chrome Support complet OuiEdge Support complet 12Firefox Support complet 37IE Support complet 11Opera Support complet OuiSafari Support complet 9WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 37Opera Android Support complet OuiSafari iOS Support complet 9Samsung Internet Android Support complet Ouinodejs Support complet 0.12
Support complet 0.12
Support complet 0.10
Désactivée
Désactivée From version 0.10: this feature is behind the --harmony runtime flag.
Map() without new throwsChrome Support complet OuiEdge Support complet 12Firefox Support complet 42IE Support complet 11Opera Support complet OuiSafari Support complet 9WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 42Opera Android Support complet OuiSafari iOS Support complet 9Samsung Internet Android Support complet Ouinodejs Support complet 0.12
Key equality for -0 and 0Chrome Support complet 38Edge Support complet 12Firefox Support complet 29IE Aucun support NonOpera Support complet 25Safari Support complet 9WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 29Opera Android Support complet 25Safari iOS Support complet 9Samsung Internet Android Support complet Ouinodejs Support complet 4.0.0
clearChrome Support complet 38Edge Support complet 12Firefox Support complet 19IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 19Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
deleteChrome Support complet 38Edge Support complet 12Firefox Support complet 13IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 14Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
Support complet 0.12
Support complet 0.10
Désactivée
Désactivée From version 0.10: this feature is behind the --harmony runtime flag.
entriesChrome Support complet 38Edge Support complet 12Firefox Support complet 20IE Aucun support NonOpera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 20Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
forEachChrome Support complet 38Edge Support complet 12Firefox Support complet 25IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 25Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
getChrome Support complet 38Edge Support complet 12Firefox Support complet 13IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 14Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet Oui
hasChrome Support complet 38Edge Support complet 12Firefox Support complet 13IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 14Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet Oui
keysChrome Support complet 38Edge Support complet 12Firefox Support complet 20IE Aucun support NonOpera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 20Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
prototypeChrome Support complet 38Edge Support complet 12Firefox Support complet 13IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 14Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet Oui
setChrome Support complet 38Edge Support complet 12Firefox Support complet 13IE Support partiel 11
Notes
Support partiel 11
Notes
Notes Returns 'undefined' instead of the 'Map' object.
Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 14Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet Oui
sizeChrome Support complet 38Edge Support complet 12Firefox Support complet 19
Notes
Support complet 19
Notes
Notes 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.
IE Support complet 11Opera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 19
Notes
Support complet 19
Notes
Notes 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.
Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
valuesChrome Support complet 38Edge Support complet 12Firefox Support complet 20IE Aucun support NonOpera Support complet 25Safari Support complet 8WebView Android Support complet 38Chrome Android Support complet 38Edge Mobile Support complet 12Firefox Android Support complet 20Opera Android Support complet 25Safari iOS Support complet 8Samsung Internet Android Support complet Ouinodejs Support complet 0.12
@@iteratorChrome Support complet OuiEdge Support complet OuiFirefox Support complet 36
Support complet 36
Aucun support 27 — 36
Notes Autre nom
Notes A placeholder property named @@iterator is used.
Autre nom Cette fonctionnalité utilise le nom non-standard : @@iterator
Aucun support 17 — 27
Notes Autre nom
Notes A placeholder property named iterator is used.
Autre nom Cette fonctionnalité utilise le nom non-standard : iterator
IE Aucun support NonOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 36
Support complet 36
Aucun support 27 — 36
Notes Autre nom
Notes A placeholder property named @@iterator is used.
Autre nom Cette fonctionnalité utilise le nom non-standard : @@iterator
Aucun support 17 — 27
Notes Autre nom
Notes A placeholder property named iterator is used.
Autre nom Cette fonctionnalité utilise le nom non-standard : iterator
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Ouinodejs Support complet 0.12
@@speciesChrome Support complet 51Edge Support complet 13Firefox Support complet 41IE Aucun support NonOpera Support complet 38Safari Support complet 10WebView Android Support complet 51Chrome Android Support complet 51Edge Mobile Support complet 13Firefox Android Support complet 41Opera Android Support complet 38Safari iOS Support complet 10Samsung Internet Android Support complet 5.0nodejs Support complet 6.5.0
Support complet 6.5.0
Support complet 6.0.0
Désactivée
Désactivée From version 6.0.0: this feature is behind the --harmony runtime flag.
@@toStringTagChrome Support complet 44Edge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Support complet 44Chrome Android Support complet 44Edge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Support complet 4.0nodejs Aucun support Non

Légende

Support complet  
Support complet
Support partiel  
Support partiel
Aucun support  
Aucun support
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

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