Module JS.6 – Structures de données

Objectif

Maîtriser toutes les structures de données JavaScript : Array, Object, Map, Set et leurs méthodes pour manipuler efficacement les données.

Théorie

Array (Tableaux)

Les tableaux sont des objets spéciaux pour stocker des collections ordonnées.

Création

// Littéral
const nombres = [1, 2, 3, 4, 5];
const mixte = [1, "texte", true, {nom: "Jean"}];

// Constructeur
const vide = new Array();
const avecTaille = new Array(5);  // Tableau de 5 éléments undefined
const avecValeurs = new Array(1, 2, 3);

Accès et modification

const nombres = [10, 20, 30];

nombres[0];           // 10 (premier élément, index 0)
nombres[1] = 25;      // Modifie le deuxième élément
nombres.length;       // 3 (longueur)
nombres[nombres.length] = 40;  // Ajoute à la fin

Méthodes de modification

Ajouter :

const nombres = [1, 2, 3];

nombres.push(4);        // Ajoute à la fin : [1, 2, 3, 4]
nombres.unshift(0);     // Ajoute au début : [0, 1, 2, 3, 4]

Retirer :

nombres.pop();          // Retire le dernier : [0, 1, 2, 3]
nombres.shift();        // Retire le premier : [1, 2, 3]

Modifier :

nombres.splice(1, 1);           // Retire 1 élément à l'index 1
nombres.splice(1, 0, 1.5);      // Insère 1.5 à l'index 1
nombres.splice(1, 1, 2.5);      // Remplace l'élément à l'index 1

Méthodes de transformation

map : Transforme chaque élément

const nombres = [1, 2, 3];
const doubles = nombres.map(n => n * 2);  // [2, 4, 6]

filter : Filtre les éléments

const pairs = nombres.filter(n => n % 2 === 0);  // [2]

reduce : Réduit à une valeur

const somme = nombres.reduce((acc, n) => acc + n, 0);  // 6

forEach : Exécute une fonction pour chaque élément

nombres.forEach((n, index) => {
    console.log(`${index}: ${n}`);
});

Méthodes de recherche

const nombres = [10, 20, 30, 20];

nombres.indexOf(20);        // 1 (première occurrence)
nombres.lastIndexOf(20);    // 3 (dernière occurrence)
nombres.includes(20);       // true
nombres.find(n => n > 15); // 20 (premier élément correspondant)
nombres.findIndex(n => n > 15); // 1

Méthodes de tri et manipulation

const nombres = [3, 1, 4, 1, 5];

nombres.sort();             // [1, 1, 3, 4, 5] (tri alphabétique par défaut !)
nombres.sort((a, b) => a - b);  // Tri numérique

nombres.reverse();          // Inverse l'ordre
nombres.slice(1, 3);       // [1, 4] (extrait sans modifier)
nombres.concat([6, 7]);     // [3, 1, 4, 1, 5, 6, 7] (nouveau tableau)

Spread operator

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const fusion = [...arr1, ...arr2];  // [1, 2, 3, 4, 5, 6]

// Copie
const copie = [...arr1];  // Nouveau tableau, pas une référence

Object (Objets)

Les objets stockent des collections de paires clé-valeur.

Création

// Littéral
const personne = {
    nom: "Jean",
    age: 30,
    ville: "Paris"
};

// Constructeur
const personne2 = new Object();
personne2.nom = "Marie";

// Object.create
const personne3 = Object.create(null);

Accès

personne.nom;              // "Jean" (notation point)
personne["age"];           // 30 (notation bracket)
personne["nom complet"];   // Bracket nécessaire pour espaces

// Variables dynamiques
const cle = "nom";
personne[cle];             // "Jean"

Modification

personne.age = 31;         // Modifie
personne.email = "jean@email.com";  // Ajoute
delete personne.ville;     // Supprime

Méthodes utiles

Object.keys(personne);     // ["nom", "age", "ville"]
Object.values(personne);   // ["Jean", 30, "Paris"]
Object.entries(personne); // [["nom", "Jean"], ["age", 30], ...]

Object.assign({}, personne);  // Copie superficielle
{...personne};                 // Spread operator (copie)

Object.freeze(personne);      // Rend immuable
Object.seal(personne);         // Empêche ajout/suppression

Déstructuration

const { nom, age } = personne;
const { nom: prenom, age: ans } = personne;  // Renommage
const { ville = "Paris" } = personne;         // Valeur par défaut

Map

Structure de données clé-valeur, meilleure que Object pour certaines utilisations.

Création et utilisation

const map = new Map();

map.set("Jean", 30);
map.set("Marie", 25);
map.get("Jean");           // 30
map.has("Jean");           // true
map.delete("Jean");
map.size;                  // 1
map.clear();               // Vide la map

Avantages sur Object

• Clés de n'importe quel type (pas seulement strings)
• Taille facile à obtenir (.size)
• Meilleures performances pour ajout/suppression fréquents
• Itération dans l'ordre d'insertion

const map = new Map();
map.set(1, "un");
map.set(true, "vrai");
map.set({cle: "objet"}, "valeur");

// Itération
for (const [cle, valeur] of map) {
    console.log(`${cle}: ${valeur}`);
}

map.forEach((valeur, cle) => {
    console.log(`${cle}: ${valeur}`);
});

Set

Collection de valeurs uniques.

Création et utilisation

const set = new Set([1, 2, 3, 3, 4]);  // [1, 2, 3, 4] (doublons retirés)

set.add(5);
set.add(3);              // Ignoré (déjà présent)
set.has(3);              // true
set.delete(3);
set.size;                // 3
set.clear();

Utilisations

Retirer les doublons :

const nombres = [1, 2, 2, 3, 3, 4];
const unique = [...new Set(nombres)];  // [1, 2, 3, 4]

Vérifier l'appartenance :

const admins = new Set(["admin1", "admin2"]);
admins.has("admin1");  // true

Opérations ensemblistes :

const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);

// Union
const union = new Set([...set1, ...set2]);  // [1, 2, 3, 4, 5]

// Intersection
const intersection = new Set([...set1].filter(x => set2.has(x)));  // [3]

// Différence
const difference = new Set([...set1].filter(x => !set2.has(x)));  // [1, 2]

Comparaison des structures

Quand utiliser Array :

• Collection ordonnée
• Besoin d'index numériques
• Opérations de tri, filtrage fréquentes

Quand utiliser Object :

• Structure de données avec clés nommées
• Besoin de JSON
• Petite collection statique

Quand utiliser Map :

• Clés dynamiques ou de types variés
• Ajout/suppression fréquents
• Besoin de connaître la taille

Quand utiliser Set :

• Besoin de valeurs uniques
• Vérification d'appartenance rapide
• Opérations ensemblistes

Exercice

1. Tableaux

   • Créez et manipulez des tableaux
   • Utilisez map, filter, reduce
   • Testez toutes les méthodes

2. Objets

   • Créez des objets complexes
   • Utilisez déstructuration
   • Testez Object.keys, values, entries

3. Map

   • Créez une Map avec différents types de clés
   • Parcourez avec for...of
   • Comparez avec Object

4. Set

   • Retirez les doublons d'un tableau
   • Testez les opérations ensemblistes
   • Utilisez pour vérifier l'appartenance

5. Choix de structure

   • Identifiez la meilleure structure pour différents cas
   • Justifiez vos choix
   • Testez les performances

Quiz

1. Quelle méthode transforme chaque élément d'un tableau ?

   • filter
   • map
   • reduce

2. Que fait new Set([1, 2, 2, 3]) ?

   • [1, 2, 2, 3]
   • [1, 2, 3] (retire doublons)
   • Erreur

3. Quelle est la différence entre Map et Object ?

   • Aucune différence
   • Map accepte n'importe quel type de clé
   • Object est plus rapide

4. Que fait [...arr1, ...arr2] ?

   • Modifie arr1
   • Crée un nouveau tableau fusionné
   • Retourne undefined

5. Comment retirer les doublons d'un tableau ?

   • arr.unique()
   • [...new Set(arr)]
   • arr.removeDuplicates()

Mini défi

Mission : Créer un système de gestion de données complet

Créez un système qui gère une collection de produits :

Données :

const produits = [
    { id: 1, nom: "Laptop", prix: 999.99, stock: 5, categorie: "Électronique" },
    { id: 2, nom: "Souris", prix: 29.99, stock: 20, categorie: "Électronique" },
    { id: 3, nom: "Clavier", prix: 79.99, stock: 15, categorie: "Électronique" },
    { id: 4, nom: "Chaise", prix: 199.99, stock: 10, categorie: "Mobilier" }
];

Fonctionnalités :

1. Recherche

   • rechercherParNom(nom) : Trouve les produits par nom
   • rechercherParId(id) : Trouve un produit par ID
   • produitsEnStock() : Liste les produits avec stock > 0

2. Tri

   • trierParPrix(ordre) : Trie par prix (croissant/décroissant)
   • trierParStock() : Trie par stock
   • trierParNom() : Trie alphabétiquement

3. Calculs

   • prixMoyen() : Calcule le prix moyen
   • prixTotal() : Calcule la somme de tous les prix
   • stockTotal() : Calcule le stock total

4. Filtres

   • produitsChers(seuil) : Produits au-dessus d'un prix
   • produitsRupture() : Produits avec stock = 0
   • produitsParCategorie(categorie) : Produits d'une catégorie

5. Groupement

   • grouperParCategorie() : Groupe les produits par catégorie (utilisez Map ou Object)
   • categoriesUniques() : Liste toutes les catégories (utilisez Set)

6. Transformations

   • appliquerRemise(pourcent) : Applique une remise à tous
   • nomsProduits() : Extrait seulement les noms
   • tableauPrix() : Extrait seulement les prix

Critères :

• ✅ Utilisation de toutes les structures (Array, Object, Map, Set)
• ✅ Méthodes natives appropriées (map, filter, reduce, etc.)
• ✅ Code organisé en fonctions
• ✅ Gestion des cas limites
• ✅ Documentation complète

Objectif : Maîtriser toutes les structures de données JavaScript et savoir choisir la bonne pour chaque situation.

---

Validation : Vous pouvez passer au module suivant quand vous maîtrisez Array, Object, Map, Set et pouvez les utiliser efficacement.