Map est un nouveau constructeur qui permet de fournir des moyens plus faciles et plus efficaces de structurer et d’accéder aux données dans certains cas d’utilisation.
Voici en 3 points, ce que fait concrètement un objet Map :
Map contient des paires clé-valeur où les clés peuvent être de n’importe quel type de données.
Map se souvient de l’ordre d’insertion original des clés.
Map possède une propriété qui représente sa taille .
Méthodes utiles pour l'objet JavaScript Map
clear()– supprime tous les éléments de l’objet map.-
delete(key)– supprime un élément spécifié par la clé. Elle renvoie si l’élément est dans l’objet Map, ou false si ce n’est pas le cas. -
entries()– retourne un nouvel objet Iterator qui contient un tableau of[key, value]pour chaque élément de l’objet map. L’ordre des objets dans l’objet Map est le même que l’ordre d’insertion. -
forEach(callback[, thisArg])– invoque un callback pour chaque paire clé-valeur de Map dans l’ordre d’insertion. Le paramètre optionnel thisArg définit la valeur this pour chaque callback. -
get(key)– renvoie la valeur associée à la clé. Si la clé n’existe pas, il retourne undefined. -
has(key)– renvoie vrai si une valeur associée à la clé existe, sinon, renvoie faux. -
keys()– renvoie un nouvel Iterator qui contient les clés des éléments dans l’ordre d’insertion. -
set(key, value)– définit la valeur de la clé dans l’objet map. Elle renvoie l’objet map lui-même ; vous pouvez donc enchaîner cette méthode avec d’autres méthodes. -
values()renvoie un nouvel objet itérateur qui contient les valeurs de chaque élément dans l’ordre d’insertion.
Exemples de cas d'utilisations de l'objet Map JavaScript
Créer un nouvel objet Map
Supposons que vous ayez une liste d’objets utilisateurs comme suit :
let pierre = {name: 'Pierre Lepez'},
jean = {name: 'Jean Doe'},
kevin = {name: 'Kévin Gomez'};Supposons que vous deviez créer un objet Map des utilisateurs et des rôles. Dans ce cas, vous utilisez le code suivant :
let userRoles = new Map();Le userRoles est une instance de l’objet Map et son type est un objet comme illustré dans l’exemple suivant :
console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // trueAjouter des éléments à Map
Pour attribuer un rôle à un utilisateur, vous utilisez la méthode set() :
userRoles.set(kevin, 'admin');La méthode set() associe l’utilisateur john au rôle d’administrateur. Puisque la méthode set() est chaînable, vous pouvez sauvegarder certaines saisies comme le montre cet exemple :
userRoles.set(pierre, 'éditeur')
.set(jean, 'abonné');Initialiser un objet Map avec un objet itérable
Comme mentionné précédemment, vous pouvez passer un objet itérable au constructeur de Map() :
let userRoles = new Map([
[kevin, 'admin'],
[pierre, 'éditeur'],
[jean, 'abonné']
]);Initialiser un objet Map avec un objet itérable
Si vous voulez voir les rôles de Kévin, vous utilisez la méthode get() :
userRoles.get(kevin); // adminSi vous passez une clé qui n’existe pas, la méthode get() retournera undefined.
let foo = {name: 'Foo'};
userRoles.get(foo); //undefinedVérifier l'existence d'un élément par clé
Pour vérifier si une clé existe dans notre objet Map, vous utilisez la méthode has().
userRoles.has(foo); // false
userRoles.has(pierre); // trueObtenir le nombre d'éléments dans notre objet Map
La propriété size renvoie le nombre d’entrées de l’objet Map.
console.log(userRoles.size); // 3Itérer sur les objets "clés" de votre objet Map
Pour obtenir les clés d’un objet Map, vous utilisez la méthode keys(). La méthode keys() renvoie un nouvel objet itérateur qui contient les clés des éléments de l’objet.
L’exemple suivant affiche le nom d’utilisateur des utilisateurs dans l’objet map userRoles.
let kevin = { name: 'Kévin Feige' },
pierre = { name: 'Pierre Rocher' },
jean = { name: 'Jean Moulin' };
let userRoles = new Map([
[kevin, 'admin'],
[pierre, 'éditeur'],
[jean, 'abonné']
]);
for (const user of userRoles.keys()) {
console.log(user.name);
}Sortie :
Kévin Feige
Pierre Rocher
Jean MoulinItérer sur les valeurs de votre objet Map
De même, vous pouvez utiliser la méthode values() pour obtenir un objet itérateur qui contient les valeurs de tous les éléments de votre objet Map :
let kevin = { name: 'Kévin Feige' },
pierre = { name: 'Pierre Rocher' },
jean = { name: 'Jean Moulin' };
let userRoles = new Map([
[kevin, 'admin'],
[pierre, 'éditeur'],
[jean, 'abonné']
]);
for (const user of userRoles.values()) {
console.log(user.name);
}Sortie :
admin
éditeur
abonnéItérer sur les éléments de votre objet Map
En outre, la méthode entries() renvoie un objet itérateur qui contient un tableau de [key,value] pour chaque élément de l’objet Map :
let kevin = { name: 'Kévin Feige' },
pierre = { name: 'Pierre Rocher' },
jean = { name: 'Jean Moulin' };
let userRoles = new Map([
[kevin, 'admin'],
[pierre, 'éditeur'],
[jean, 'abonné']
]);
for (const role of userRoles.entries()) {
console.log(`${role[0].name}: ${role[1]}`);
}Pour rendre l’itération plus naturelle, vous pouvez utiliser la déstructuration comme suit :
let kevin = { name: 'Kévin Feige' },
pierre = { name: 'Pierre Rocher' },
jean = { name: 'Jean Moulin' };
let userRoles = new Map([
[kevin, 'admin'],
[pierre, 'éditeur'],
[jean, 'abonné']
]);
userRoles.forEach((role, user) => console.log(`${user.name}: ${role}`));En plus de la boucle for…of, vous pouvez utiliser la méthode forEach() de l’objet map :
Convertir les clés ou les valeurs de la Map en un tableau
Parfois, vous souhaitez travailler avec un tableau au lieu d’un objet itérable, dans ce cas, vous pouvez utiliser l’opérateur d’étalement ( spread operator ).
L’exemple suivant convertit les clés de chaque élément en un tableau de clés :
var keys = [...userRoles.keys()];
console.log(keys);Sortie :
[ { name: 'Kévin Feige' },
{ name: 'Pierre Rocher' },
{ name: 'Jean Moulin' } ]Et ce qui suit convertit les valeurs des éléments en un tableau :
let roles = [...userRoles.values()];
console.log(roles);Sortie :
[ 'admin', 'éditeur', 'abonné' ]Supprimer un élément par sa clé
Pour supprimer une entrée dans votre objet Map, vous utilisez la méthode delete().
userRoles.delete(pierre);Supprimer tous les éléments d'un objet Map
Pour supprimer toutes les entrées de l’objet Map, vous utilisez la méthode clear() :
userRoles.clear();
console.log(userRoles.size); // 0WeakMap
Une WeakMap est similaire à une Map, sauf que les clés d’une WeakMap doivent être des objets. Cela signifie que lorsqu’une référence à une clé (un objet) est hors de portée, la valeur correspondante est automatiquement libérée de la mémoire.
Un WeakMap ne possède que les méthodes d’un sous-ensemble d’un objet Map :
- get(key)
- set(key, value)
- has(key)
- delete(key)
Voici les principales différences entre une Map et un WeakMap :
- Les éléments d’une WeakMap ne peuvent pas être itérés.
- On ne peut pas effacer tous les éléments à la fois.
- Impossible de vérifier la taille d’une WeakMap.
Dans ce tutoriel, vous avez appris à travailler avec l’objet JavaScript Map et ses méthodes utiles pour manipuler les entrées de l’objet Map.
