Méthodes de Map en JavaScript
La nouvelle méthode Map()
Vous pouvez créer une map en passant un tableau au constructeur new Map() :
Exemple
// Créer une Map
const fruits = new Map([
["apples", 500],
["bananas", 300],
["oranges", 200]
]);
Map.get()
Vous pouvez obtenir la valeur d'une clé dans une map avec la méthode get()
Exemple
fruits.get("apples"); Map.set()
Vous pouvez ajouter des éléments à une map avec la méthode set() :
Exemple
// Créer une Map
const fruits = new Map();
// Définir les valeurs de la Map
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
La méthode set() peut également être utilisée pour modifier les valeurs existantes de la map :
Exemple
fruits.set("apples", 500); Map.size
La propriété size retourne le nombre d'éléments dans une map :
Exemple
fruits.size; Map.delete()
La méthode delete() supprime un élément de la map :
Exemple
fruits.delete("apples"); Map.clear()
La méthode clear() supprime tous les éléments d'une map :
Exemple
fruits.clear(); Map.has()
La méthode has() retourne vrai si une clé existe dans une map :
Exemple
fruits.has("apples"); Essayez ceci :
fruits.delete("apples");
fruits.has("apples"); Map.forEach()
La méthode forEach() invoque un rappel pour chaque paire clé/valeur dans une map :
Exemple
// Lister toutes les entrées
let text = "";
fruits.forEach (function(value, key) {
text += key + ' = ' + value;
}) Map.entries()
La méthode entries() retourne un objet itérateur avec les [clé,valeurs] dans une map :
Exemple
// Lister toutes les entrées
let text = "";
for (const x of fruits.entries()) {
text += x;
} Map.keys()
La méthode keys() retourne un objet itérateur avec les clés dans une map :
Exemple
// Lister toutes les clés
let text = "";
for (const x of fruits.keys()) {
text += x;
} Map.values()
La méthode values() retourne un objet itérateur avec les valeurs dans une map :
Exemple
// Lister toutes les valeurs
let text = "";
for (const x of fruits.values()) {
text += x;
} Vous pouvez utiliser la méthode values() pour additionner les valeurs dans une map :
Exemple
// Additionner toutes les valeurs
let total = 0;
for (const x of fruits.values()) {
total += x;
} Objets comme Clés
Pouvoir utiliser des objets comme clés est une fonctionnalité importante de Map.
Exemple
// Créer des Objets
const apples = {name: 'Apples'};
const bananas = {name: 'Bananas'};
const oranges = {name: 'Oranges'};
// Créer une Map
const fruits = new Map();
// Ajouter de nouveaux éléments à la Map
fruits.set(apples, 500);
fruits.set(bananas, 300);
fruits.set(oranges, 200);
Rappelez-vous : La clé est un objet (apples), pas une chaîne ("apples") :
Exemple
fruits.get("apples"); // Retourne undefined
JavaScript Map.groupBy()
ES2024 a ajouté la méthode Map.groupBy() à JavaScript.
La méthode Map.groupBy() groupe les éléments d'un tableau selon les valeurs de chaîne retournées par une fonction de rappel.
La méthode Map.groupBy() ne modifie pas l'objet original.
Exemple
// Créer un Tableau
const fruits = [
{name:"apples", quantity:300},
{name:"bananas", quantity:500},
{name:"oranges", quantity:200},
{name:"kiwi", quantity:150}
];
// Fonction de rappel pour grouper les éléments
function myCallback({ quantity }) {
return quantity > 200 ? "ok" : "low";
}
// Grouper par Quantité
const result = Map.groupBy(fruits, myCallback);
Support des Navigateurs
Map.groupby() est une fonctionnalité d'ES2024.
JavaScript 2024 est pris en charge dans les nouveaux navigateurs depuis mars 2024 :
| Chrome 117 | Edge 117 | Firefox 119 | Safari 17.4 | Opera 103 |
| Sep 2023 | Sep 2023 | Oct 2023 | Okt 2024 | May 2023 |
Avertissement
Les fonctionnalités d'ES2024 sont relativement nouvelles.
Les anciens navigateurs peuvent nécessiter un code alternatif (Polyfill)
Object.groupBy() vs Map.groupBy()
La différence entre Object.groupBy() et Map.groupBy() est :
Object.groupBy() groupe les éléments dans un objet JavaScript.
Map.groupBy() groupe les éléments dans un objet Map.