Semaine 2 - Jour 5 | Tableaux d'objets

Combiner tableaux et objets

Les tableaux d'objets sont extrêmement courants en programmation JavaScript. Ils permettent de stocker et manipuler des collections de données structurées (utilisateurs, produits, commandes...).

Cas d'usage réels : liste d'étudiants avec leurs notes, catalogue de produits e-commerce, données JSON d'une API, liste de tâches avec détails...

Puissance : On peut combiner les méthodes de tableaux (map, filter, reduce) avec les objets pour effectuer des traitements de données complexes de manière élégante.

1. Créer et parcourir

Un tableau d'objets est simplement un tableau où chaque élément est un objet.

                        // Tableau d'étudiants

                        let etudiants = [

                          { nom: 'Dupont', prenom: 'Alice', age: 22 },

                          { nom: 'Martin', prenom: 'Bob', age: 20 },

                          { nom: 'Bernard', prenom: 'Clara', age: 23 }

                        ];

                        // Accéder à un élément

                        console.log(etudiants[0].nom); // 'Dupont'

                        // Parcourir avec for...of

                        for (let etudiant of etudiants) {

                          console.log(`${etudiant.prenom} ${etudiant.nom}`);

                        }

2. Filtrer des objets

Utiliser filter() pour sélectionner des objets selon des critères.

                        let produits = [

                          { nom: 'Laptop', prix: 999, enStock: true },

                          { nom: 'Souris', prix: 29, enStock: false },

                          { nom: 'Clavier', prix: 79, enStock: true }

                        ];

                        // Filtrer les produits en stock

                        let disponibles = produits.filter(p => p.enStock);

                        // Filtrer les produits < 100€

                        let abordables = produits.filter(p => p.prix < 100);

                        console.log(disponibles.length); // 2 produits

3. Transformer avec map()

Utiliser map() pour extraire ou transformer des propriétés d'objets.

                        let etudiants = [

                          { nom: 'Alice', note: 15 },

                          { nom: 'Bob', note: 12 },

                          { nom: 'Clara', note: 18 }

                        ];

                        // Extraire juste les noms

                        let noms = etudiants.map(e => e.nom);

                        console.log(noms); // ['Alice', 'Bob', 'Clara']

                        // Ajouter 2 points bonus à chaque note

                        let avecBonus = etudiants.map(e => ({

                          ...e,

                          note: Math.min(e.note + 2, 20)

                        }));

4. Trier et destructuration

sort() pour trier par propriété • Destructuration pour extraire les valeurs.

                        let produits = [

                          { nom: 'C', prix: 50 },

                          { nom: 'A', prix: 30 },

                          { nom: 'B', prix: 40 }

                        ];

                        // Trier par prix croissant

                        produits.sort((a, b) => a.prix - b.prix);

                        // Destructuration

                        let { nom, prix } = produits[0];

                        console.log(nom, prix); // 'A' 30

                        // Destructuration dans une boucle

                        for (let { nom, prix } of produits) {

                          console.log(`${nom}: ${prix}€`);

                        }

Exemples pratiques - E-commerce

                    // Catalogue de produits

                    let catalogue = [

                      { id: 1, nom: 'Ordinateur', prix: 999, categorie: 'Informatique', stock: 15 },

                      { id: 2, nom: 'Souris', prix: 29, categorie: 'Accessoires', stock: 0 },

                      { id: 3, nom: 'Écran', prix: 299, categorie: 'Informatique', stock: 8 },

                      { id: 4, nom: 'Clavier', prix: 79, categorie: 'Accessoires', stock: 20 }

                    ];

                    // 1. Produits en stock

                    let enStock = catalogue.filter(p => p.stock > 0);

                    console.log('Produits disponibles:', enStock.length);

                    // 2. Produits de la catégorie Informatique

                    let informatique = catalogue.filter(p => {

                      return p.categorie === 'Informatique';

                    });

                    console.log('Informatique:', informatique.map(p => p.nom));

                    // 3. Calculer la valeur totale du stock

                    let valeurTotale = catalogue.reduce((total, p) => {

                      return total + (p.prix * p.stock);

                    }, 0);

                    console.log('Valeur totale:', valeurTotale, '€');

                    // 4. Trier par prix décroissant

                    let parPrix = [...catalogue].sort((a, b) => b.prix - a.prix);

                    console.log('Le plus cher:', parPrix[0].nom);

                    // 5. Créer un résumé pour affichage

                    let resume = catalogue.map(p => ({

                      nom: p.nom,

                      info: `${p.prix}€ - ${p.stock > 0 ? 'En stock' : 'Rupture'}`

                    }));

                    console.log('Résumé:', resume);

Copiez ces exemples dans la console interactive ci-dessus !