💎 Collections Uniques avec Mini Jeux Magiques (Édition JS Set 🧙‍♂️)

💎 Collections Uniques avec Mini Jeux Magiques (Édition JS Set 🧙‍♂️)

Bonjour, cher héros du code ! 🦸‍♀️🦸‍♂️
Aujourd’hui, je vais te présenter le superpouvoir caché de JavaScript : le Set. Mais on ne le fera pas comme un cours ennuyeux – nous utiliserons des mini jeux magiques, des astuces pratiques et des exemples amusants 😎


1️⃣ Qu’est-ce qu’un Set ? (Et Pourquoi il est Magique 😏)

Imagine que tu as une boîte magique qui ne peut contenir que des éléments uniques.
Un Set fait exactement cela ! Il ressemble à un tableau, mais il ne stocke jamais de doublons.

// Création d’un Set vide
const fruits = new Set();

// Ajout d’éléments au Set
fruits.add("pomme");
fruits.add("poire");
fruits.add("pomme"); // 😂 ne sera pas ajouté, les doublons sont interdits

console.log(fruits); // Set(2) { 'pomme', 'poire' }

Explication :

  • new Set() crée une boîte magique vide (Set).
  • add() ajoute des éléments.
  • Le deuxième “pomme” est ignoré car un Set n’accepte jamais de doublons 💖

💡 Astuce pratique : Pour supprimer les doublons d’un tableau :

const numbers = [1,2,2,3,3,3];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3]

Magique, non ? 😎✨


2️⃣ Méthodes de Base du Set : Armes Super 🛡️

Les principales méthodes pour gérer un Set :


1. add(value) – Ajout Magique ✨

const gameCharacters = new Set();
gameCharacters.add("Mario");
gameCharacters.add("Luigi");
gameCharacters.add("Mario"); // doublon ignoré

console.log(gameCharacters); // Set(2) { 'Mario', 'Luigi' }

Explication :

  • add() ajoute un élément au Set.
  • Si l’élément existe déjà, le Set le rejette.
  • Le Set est comme un ami fidèle : “Pas de doublons autorisés !” 😏

💡 Astuce pratique : Pour nettoyer une liste fournie par l’utilisateur, new Set(list) est une solution rapide.


2. delete(value) – Pars d’ici ! ✋

gameCharacters.delete("Luigi");
console.log(gameCharacters); // Set(1) { 'Mario' }

Explication :

  • delete() supprime l’élément spécifié du Set.
  • Si l’élément n’existe pas, rien ne se passe.

💡 Astuce : delete() renvoie un booléen. Tu peux vérifier si la suppression a réussi :

console.log(gameCharacters.delete("Mario")); // true
console.log(gameCharacters.delete("Luigi")); // false


3. has(value) – Mode Détective 🕵️

console.log(gameCharacters.has("Mario")); // true
console.log(gameCharacters.has("Luigi")); // false

Explication :

  • has() vérifie si l’élément existe dans le Set.
  • Comme un agent secret : “Cette valeur est-elle ici ?” 😎

💡 Astuce pratique : Combine has() + add() pour éviter les doublons :

const friends = new Set();
function addFriend(name) {
    if (!friends.has(name)) {
        friends.add(name);
        console.log(`${name} ajouté ! 🎉`);
    } else {
        console.log(`${name} existe déjà, pas de doublons ! 😏`);
    }
}
addFriend("Ahmet");
addFriend("Ahmet");


4. clear() – Bouton Reset 🔥

friends.clear();
console.log(friends); // Set(0) {}

Explication :

  • clear() vide complètement le Set.
  • Tous les éléments disparaissent, comme fermer de vieux chapitres 😂

5. size – Taille du Set 📏

const numbers = new Set([1,2,3,3,4]);
console.log(numbers.size); // 4

Explication :

  • size montre le nombre d’éléments dans le Set.
  • Comme length dans un tableau.

💡 Astuce pratique : Utilise size pour limiter les doublons, par ex. autoriser seulement jusqu’à 5 ajouts 😏


3️⃣ Mini Jeu Magique 1 : Liste d’Amis 🥳

Imagine une application où les utilisateurs ajoutent des amis, mais pas de doublons autorisés :

const friends = new Set();

friends.add("Ahmet");
friends.add("Ayşe");
friends.add("Ahmet"); // doublon ignoré

for (let friend of friends) {
  console.log(friend); // Ahmet, Ayşe
}

💖 Set est fidèle : pas de doublons autorisés 😏


4️⃣ Mini Jeu Magique 2 : Distribution Aléatoire de Cadeaux 🎁

À une fête, tout le monde reçoit un cadeau mais pas de doublons autorisés :

const gifts = ["peluche", "chocolat", "livre", "stylo"];
const givenGifts = new Set();

while (givenGifts.size < 3) {
    const randomGift = gifts[Math.floor(Math.random() * gifts.length)];
    givenGifts.add(randomGift);
}

console.log(givenGifts); // 3 cadeaux uniques

Explication :

  • Math.random() choisit un élément aléatoire.
  • Set garantit que les doublons sont ignorés ✨

💡 Astuce : Suis combien d’éléments uniques ont été ajoutés avec size.


5️⃣ Mini Jeu Magique 3 : Intersection & Différence 🌀

Tu peux faire des maths de sets avec les Sets 😎

const setA = new Set([1,2,3,4]);
const setB = new Set([3,4,5,6]);

// Intersection
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(intersection); // Set(2) {3, 4}

// Différence
const difference = new Set([...setA].filter(x => !setB.has(x)));
console.log(difference); // Set(2) {1, 2}

Explication :

  • Intersection = éléments communs
  • Différence = éléments présents uniquement dans un Set
  • Le Set gère les valeurs uniques comme un magicien 🧙‍♂️

💡 Astuce pratique : Utilise cette méthode pour filtrer des choix utilisateurs ou créer des ensembles uniques.


6️⃣ Bonus : Set → Array et Array → Set 🔄

const nums = [1,2,2,3,3,3];
const uniqueNums = [...new Set(nums)]; // Array → Set → doublons supprimés
console.log(uniqueNums); // [1, 2, 3]

💡 Astuce pratique : Après avoir nettoyé les doublons avec un Set, tu peux continuer à utiliser les méthodes de tableau comme map(), filter(), reduce() 😎


🎉 Résumé

  • Set = Collection sans doublons 💎
  • add() = Ajouter un élément
  • delete() = Supprimer un élément
  • has() = Vérifier l’existence
  • clear() = Tout supprimer
  • size = Nombre d’éléments

💖 Comme nous l’avons vu avec les mini jeux, les Sets ne stockent pas seulement des données – ils ajoutent du fun et de la magie à ton code

Comments

No comments yet. Why don’t you start the discussion?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir