Set JS : Comprendre New Set et Différences avec Map JavaScript

Tu viens de débuter en JavaScript et tu entends parler de cette chose mystérieuse appelée ‘Set’ ? Ou peut-être que tu te demandes quelle est la différence entre un Set et une Map ? Pas de panique, je vais tout t’expliquer ! Dans cet article, on va plonger ensemble dans l’univers des Sets en JavaScript, comprendre comment les utiliser et voir en quoi ils diffèrent des Maps. C’est parti ! 🚀

📌 L’essentiel à retenir

• Unicité : un Set ne stocke que des valeurs uniques, idéal pour éliminer les doublons
• Création : utilise new Set() pour créer un Set vide ou new Set(array) pour le remplir directement
• Méthodes principales : add(), delete(), has() et clear() pour manipuler ton Set
• Performance : la recherche avec has() est plus rapide qu’avec includes() dans un tableau classique
• Set vs Map : un Set stocke des valeurs uniques, une Map stocke des paires clé-valeur

Qu’est-ce qu’un Set en JavaScript ? 🤔

Un Set en JavaScript, c’est un peu comme une boîte spéciale qui n’accepte que des objets uniques. Tu ne peux pas y mettre deux fois la même chose ! C’est super pratique quand tu veux t’assurer que ta collection ne contient pas de doublons.

Selon la documentation officielle, ‘un objet Set permet de stocker un ensemble de valeurs uniques de n’importe quel type, qu’il s’agisse de valeurs primitives ou d’objets.’

Pourquoi utiliser un Set ? 🎯

Tu pourrais te dire : ‘Mais pourquoi ne pas utiliser un simple tableau ?’ Voici quelques raisons :

• Les Sets garantissent l’unicité des valeurs (fini les doublons !)
• La méthode has() est plus rapide que Array.includes() pour chercher un élément
• Ajouter/supprimer des éléments est super simple avec add() et delete()
• Tu peux facilement convertir un Set en tableau et vice-versa

Comment créer et utiliser un Set ? 🛠️

C’est super simple de créer un Set en JavaScript ! Tu as deux options principales :

Créer un Set vide

const monNouveauSet = new Set();

Créer un Set à partir d’un tableau

const mesNombres = [1, 2, 3, 4, 4, 5, 5, 5];const monSetDeNombres = new Set(mesNombres);console.log(monSetDeNombres); // Set(5) { 1, 2, 3, 4, 5 }

Tu as vu ? Les doublons ont automatiquement disparu ! 🪄

Les principales méthodes d’un Set

Voici les méthodes que tu vas utiliser quotidiennement avec tes Sets :

Voyons ça en action avec un exemple concret :

const monSet = new Set();// Ajoutons quelques élémentsmonSet.add(1);monSet.add('texte');monSet.add({ nom: 'Jean' });console.log(monSet.size); // 3// Vérifions si certains éléments existentconsole.log(monSet.has(1)); // trueconsole.log(monSet.has(2)); // false// Supprimons un élémentmonSet.delete(1);console.log(monSet.size); // 2

Itérer sur un Set : toutes les façons de le faire 🔄

Il existe plusieurs façons de parcourir les éléments d’un Set. Choisis celle qui te convient le mieux !

Avec une boucle for…of

const couleurs = new Set(['rouge', 'bleu', 'vert']);for (let couleur of couleurs) {    console.log(couleur);}// Affiche: rouge, bleu, vert

Avec la méthode forEach

couleurs.forEach(couleur => {    console.log(couleur);});// Affiche: rouge, bleu, vert

Avec les méthodes d’itération

Un Set dispose de plusieurs méthodes pour obtenir des itérateurs :

• values() : retourne un itérateur avec toutes les valeurs
• keys() : identique à values() (pour compatibilité avec les Maps)
• entries() : retourne des paires [valeur, valeur] (aussi pour compatibilité)

// Exemple avec values()for (let valeur of couleurs.values()) {    console.log(valeur);}

Le cas spécial : Set et tableaux 🔄

Les Sets et les tableaux sont cousins en JavaScript, et ils peuvent facilement se convertir l’un dans l’autre !

Convertir un tableau en Set

const monTableau = [1, 2, 2, 3, 4, 4, 5];const monSet = new Set(monTableau);// monSet contient { 1, 2, 3, 4, 5 }

Convertir un Set en tableau

Tu as deux options principales :

// Option 1: avec l'opérateur spread (...)const monTableauRetour = [...monSet];// Option 2: avec Array.from()const monTableauRetour2 = Array.from(monSet);

Le truc génial : supprimer les doublons d’un tableau

Voici une astuce que tu vas adorer pour éliminer les doublons d’un tableau en une seule ligne :

const tableauAvecDoublons = [1, 2, 2, 3, 4, 4, 5, 5, 5];const tableauUnique = [...new Set(tableauAvecDoublons)];console.log(tableauUnique); // [1, 2, 3, 4, 5]

C’est pas magique ça ? 🎩✨

Set vs Map : quelle différence ? 🤔

Tu entends parler de Set et Map et tu te demandes quelle est la différence ? Voici un petit comparatif pour t’aider :

Quand utiliser l’un ou l’autre ?

• Utilise un Set quand tu as besoin d’une collection de valeurs uniques sans association particulière
• Utilise une Map quand tu as besoin d’associer des valeurs à des clés (comme un dictionnaire)

Un exemple pour illustrer la différence

// Avec un Set : liste de noms uniquesconst nomsUniques = new Set();nomsUniques.add('Marie');nomsUniques.add('Paul');nomsUniques.add('Marie'); // Ignoré car déjà présent// Avec une Map : association nom/âgeconst personnes = new Map();personnes.set('Marie', 28);personnes.set('Paul', 32);personnes.set('Marie', 29); // Remplace la valeur précédente

Cas d’utilisation pratiques des Sets 💡

Maintenant que tu connais les bases, voyons quelques situations concrètes où les Sets brillent particulièrement !

1. Éliminer les doublons (on l’a déjà vu, mais c’est tellement utile !)

const tableauANettoyer = [1, 2, 3, 3, 4, 5, 5, 5];const tableauPropre = [...new Set(tableauANettoyer)];

2. Vérifier la présence d’éléments (plus rapide qu’avec les tableaux)

const listeBlanche = new Set(['admin@site.com', 'support@site.com']);function estAutorise(email) {    return listeBlanche.has(email);}console.log(estAutorise('admin@site.com')); // trueconsole.log(estAutorise('hacker@malware.com')); // false

3. Créer des opérations d’ensemble (union, intersection, différence)

Tu peux implémenter des opérations mathématiques sur les ensembles :

// Définissons nos ensemblesconst setA = new Set([1, 2, 3, 4]);const setB = new Set([3, 4, 5, 6]);// Union (tous les éléments de A et B)const union = new Set([...setA, ...setB]);// Set { 1, 2, 3, 4, 5, 6 }// Intersection (éléments présents dans A ET B)const intersection = new Set([...setA].filter(x => setB.has(x)));// Set { 3, 4 }// Différence (éléments dans A mais pas dans B)const difference = new Set([...setA].filter(x => !setB.has(x)));// Set { 1, 2 }

4. Supprimer les doublons dans une chaîne de caractères

const texte = 'bonjour';const caractèresUniques = [...new Set(texte)].join('');console.log(caractèresUniques); // 'bonjur'

C’est particulièrement utile si tu travailles avec la fonction fetch en JavaScript pour récupérer des données et que tu as besoin de filtrer des doublons dans les réponses.

Conseils et pièges à éviter avec les Sets 🚨

Comme toute fonctionnalité en programmation, les Sets ont quelques subtilités à connaître :

Attention à l’égalité des objets

Les objets sont considérés comme différents même s’ils ont le même contenu :

const monSet = new Set();monSet.add({ nom: 'Paul' });monSet.add({ nom: 'Paul' }); // Considéré comme DIFFÉRENTconsole.log(monSet.size); // 2 (pas 1 !)

Les valeurs spéciales comme NaN

Contrairement à l’opérateur d’égalité stricte (===), un Set considère que NaN est égal à NaN :

const monSet = new Set();monSet.add(NaN);monSet.add(NaN);console.log(monSet.size); // 1, pas 2 !

Performances

Pour les recherches fréquentes dans une grande collection de données, un Set va généralement être plus performant qu’un tableau :

// Exemple avec 10 000 élémentsconst grandeCollection = Array.from({ length: 10000 }, (_, i) => i);const grandSet = new Set(grandeCollection);// Recherche dans un tableau vs recherche dans un Setconsole.time('recherche tableau');grandeCollection.includes(9999);console.timeEnd('recherche tableau');console.time('recherche set');grandSet.has(9999);console.timeEnd('recherche set');// Le Set sera souvent beaucoup plus rapide !

Compatibilité et navigateurs 🌐

Les Sets sont supportés par tous les navigateurs modernes ! Tu peux les utiliser sans crainte, sauf si tu dois supporter des dinosaures comme Internet Explorer…

Voici un petit aperçu de la compatibilité :

• Chrome : Depuis la version 38
• Firefox : Depuis la version 13
• Safari : Depuis la version 7.1
• Edge : Depuis toujours (ou presque)
• Internet Explorer : À partir d’IE11 (mais avec des limitations)

Conclusion : quand utiliser un Set ? 🏁

Pour résumer, un Set est ton meilleur ami quand :

• Tu as besoin de stocker des valeurs uniques
• Tu dois vérifier rapidement si une valeur existe dans ta collection
• Tu veux éliminer facilement les doublons d’un tableau
• Tu travailles avec des opérations d’ensembles mathématiques

Par contre, préfère un Map ou un objet classique si tu as besoin d’associer des valeurs à des clés, ou un Array simple si l’ordre des éléments et les doublons sont importants pour toi.

Alors, prêt à utiliser les Sets dans ton prochain projet JavaScript ? N’hésite pas à me poser des questions dans les commentaires ! 😊

FAQ sur les Sets en JavaScript

Comment convertir un Set en array (tableau) en JavaScript ?

C’est super simple ! Tu peux utiliser l’opérateur spread [...monSet] ou la méthode Array.from(monSet).

Quelle est la différence entre Map et Set en JavaScript ?

Un Set stocke des valeurs uniques, tandis qu’une Map stocke des paires clé-valeur. Utilise un Set pour une liste de valeurs sans doublons, et une Map quand tu as besoin d’associer des données à des clés.

Comment itérer sur tous les éléments d’un Set en JavaScript ?

Tu peux utiliser for...of, la méthode forEach, ou les itérateurs values() et entries().

Les Sets sont-ils plus performants que les tableaux en JavaScript ?

Pour vérifier si un élément existe, Set.has() est généralement beaucoup plus rapide que Array.includes(), surtout avec de grandes collections.

Comment ajouter plusieurs éléments à un Set en JavaScript ?

Tu peux soit les ajouter un par un avec add(), soit créer un nouveau Set à partir d’un tableau contenant tous les éléments.