JavaScript

Les collections Map et Set

Les collections Map et Set. Dans cette leçon du cours JavaScript, vous apprendrez à : créer et manipuler une Map (clé → valeur) ; créer et manipuler un Set (valeurs uniques) ; supprimer des doublons e...

0 chapitres 0 QCM Accès gratuit

Commencer Retour aux cours

À propos de ce cours

Chapitre 9 — Les objets littéraux, JSON et les collections · Les collections Map et Set

🎯 Objectifs de la leçon
• créer et manipuler une Map (clé → valeur) ;
• créer et manipuler un Set (valeurs uniques) ;
• supprimer des doublons et calculer des opérations d'ensembles ;
• choisir entre objet, tableau, Map et Set.

1. Deux collections spécialisées

Map et Set
Figure 1 — Une Map associe des clés à des valeurs ; un Set ne garde que des valeurs uniques.

// ===== Map : un dictionnaire dont les clés peuvent être de n'importe quel type =====
const stocks = new Map();
stocks.set("clavier", 12).set("souris", 30).set("écran", 4);
console.log("taille :", stocks.size, "| souris :", stocks.get("souris"), "| has('tapis') :", stocks.has("tapis"));
stocks.set("souris", 28);          // modifier
stocks.delete("écran");            // supprimer
for (const [article, quantite] of stocks) console.log(`  ${article} → ${quantite}`);

// Les clés peuvent être des objets ou des nombres
const amina = { nom: "Amina" };
const presences = new Map([[amina, 18], [404, "page introuvable"]]);
console.log("présences d'Amina :", presences.get(amina), "| clé 404 :", presences.get(404));

// Convertir entre Map et objet
const objet = Object.fromEntries(stocks);
const map2 = new Map(Object.entries({ a: 1, b: 2 }));
console.log("Map → objet :", objet, "| objet → Map :", map2.size, "entrées");

// ===== Set : un ensemble de valeurs UNIQUES =====
const inscrits = new Set(["Amina", "Karim", "Amina", "Salma", "Karim"]);
console.log("Set :", [...inscrits], "| taille :", inscrits.size);
inscrits.add("Yassine").add("Amina");
console.log("has('Salma') :", inscrits.has("Salma"));

// Supprimer les doublons d'un tableau
const notes = [12, 15, 12, 18, 15, 9];
console.log("Notes distinctes :", [...new Set(notes)].sort((a, b) => a - b));

// Opérations d'ensembles
const html = new Set(["Amina", "Karim", "Salma"]);
const js = new Set(["Karim", "Salma", "Yassine"]);
const lesDeux = [...html].filter((n) => js.has(n));
const auMoinsUn = new Set([...html, ...js]);
const seulementHtml = [...html].filter((n) => !js.has(n));
console.log("Inscrits aux deux :", lesDeux, "| au moins un :", auMoinsUn.size, "| HTML seulement :", seulementHtml);

// Map ou objet ? Set ou tableau ?
console.log("Ordre d'insertion conservé :", [...new Map([["z", 1], ["a", 2]]).keys()]);

Résultat dans la console

taille : 3 | souris : 30 | has('tapis') : false
  clavier → 12
  souris → 28
présences d'Amina : 18 | clé 404 : page introuvable
Map → objet : { clavier: 12, souris: 28 } | objet → Map : 2 entrées
Set : [ 'Amina', 'Karim', 'Salma' ] | taille : 3
has('Salma') : true
Notes distinctes : [ 9, 12, 15, 18 ]
Inscrits aux deux : [ 'Karim', 'Salma' ] | au moins un : 4 | HTML seulement : [ 'Amina' ]
Ordre d'insertion conservé : [ 'z', 'a' ]

2. Map ou objet ? Set ou tableau ?

Besoin	Choix	Pourquoi
Décrire une chose (un contact, un produit)	objet	propriétés fixes, notation pointée, JSON direct
Associer des valeurs à des clés qui changent souvent	`Map`	`size`, ajouts et suppressions rapides, aucune clé héritée
Utiliser un objet ou un nombre comme clé	`Map`	un objet convertit toutes ses clés en texte
Une liste ordonnée, avec doublons possibles	tableau	indices, `map`, `filter`, tri
Des valeurs uniques, tester l'appartenance	`Set`	doublons ignorés, `has()` très rapide

On passe facilement de l'un à l'autre : [...set], new Set(tableau), Object.fromEntries(map), new Map(Object.entries(objet)). Attention : JSON.stringify ne sait pas convertir une Map ou un Set directement ; convertissez-les d'abord.

ℹ️ À retenir
• new Map(): set, get, has, delete, size; clés de tout type.
• new Set(): add, has, delete, size; valeurs uniques.
• [...new Set(tableau)] supprime les doublons.
• Les deux se parcourent avec for…of et conservent l'ordre d'insertion.

🛠 Activité 6 — La gestion des inscriptions

Mission : Des stagiaires s'inscrivent à des ateliers (HTML, JavaScript, Git). Les inscriptions arrivent dans un tableau qui contient des doublons.

Questions pour avancer (répondez dans votre compte rendu, puis appliquez dans votre projet) :

Obtenez la liste des inscrits à l'atelier JavaScript sans doublons, triée par ordre alphabétique. Combien de doublons y avait-il ?
Trouvez les stagiaires inscrits à la fois en HTML et en JavaScript, ceux inscrits à au moins un atelier, et ceux inscrits seulement en Git.
Avec une Map, associez à chaque stagiaire le nombre d'ateliers auxquels il est inscrit. Qui en suit le plus ?
Utilisez les objets stagiaires eux-mêmes (et non leur nom) comme clés d'une Map de présences. Pourquoi est-ce impossible avec un objet ordinaire ? (essayez et affichez les clés)
Convertissez votre Map en JSON. Que donne JSON.stringify(map) directement ? Comment obtenez-vous un JSON exploitable ?
Pour vérifier si un stagiaire est inscrit parmi 10 000, comparez le temps de tableau.includes et de set.has avec console.time.

Je vérifie / je rends :

☐ Le script et les mesures de la question 6.

← Le format JSON : JSON.stringify et JSON.parseTP 9 : Gérer un carnet de contacts avec les objets et JSON →

Sommaire du cours JavaScript

Télécharger ce cours en PDF 0

Les collections Map et Set

Dans cet article

09- Les objets littéraux, JSON et les collections

Sommaire du cours

Autres catégories