03

Tableaux & Objets

map, filter, reduce, find, destructuring, spread/rest

← Accueil

1 Tableaux — méthodes essentielles

const fruits = ["pomme", "banane", "cerise"];

fruits.push("orange");    // ajoute à la fin       → ["pomme","banane","cerise","orange"]
fruits.pop();             // supprime la fin        → ["pomme","banane","cerise"]
fruits.unshift("kiwi");   // ajoute au début        → ["kiwi","pomme","banane","cerise"]
fruits.shift();           // supprime le début      → ["pomme","banane","cerise"]
fruits.splice(1, 1);      // supprime 1 élément à index 1 → ["pomme","cerise"]

fruits.length;             // nombre d'éléments
fruits.indexOf("pomme");   // index de "pomme" (ou -1 si absent)
fruits.includes("banane"); // true/false
fruits.join(", ");         // "pomme, cerise"

2 Les 4 méthodes incontournables

map() — transformer chaque élément

const notes = [12, 15, 8, 18];
const bonus  = notes.map(n => n + 2);     // [14, 17, 10, 20]
const labels = notes.map(n => `${n}/20`); // ["12/20", "15/20", ...]
map() retourne un nouveau tableau — l'original n'est pas modifié.

filter() — garder certains éléments

const prix = [5, 120, 35, 89, 12];
const pasChers = prix.filter(p => p < 50);  // [5, 35, 12]
const chers    = prix.filter(p => p >= 50); // [120, 89]

find() — trouver le premier qui correspond

const users = [
  { id: 1, nom: "Alice" },
  { id: 2, nom: "Bob" },
];
const user = users.find(u => u.id === 2); // { id: 2, nom: "Bob" }
// si rien trouvé → undefined

reduce() — accumuler en une valeur

const panier = [10, 25, 8, 47];

// (accumulateur, valeur_actuelle) => nouvel_accumulateur
const total = panier.reduce((acc, prix) => acc + prix, 0);
// 0 → 10 → 35 → 43 → 90
console.log(total); // 90
💡 Astuce : reduce peut tout faire — somme, max, objet, tableau aplati.
Erreur fréquente :
// Oublier la valeur initiale (0 ici)
[].reduce((acc, n) => acc + n);       // TypeError !
[].reduce((acc, n) => acc + n, 0);    // 0 ← correct

3 Objets

const produit = {
  nom: "Laptop",
  prix: 899,
  stock: true,
};

// Accès
produit.nom;          // "Laptop"
produit["prix"];      // 899

// Modifier / Ajouter / Supprimer
produit.prix = 799;
produit.promo = true;
delete produit.stock;

// Boucler
for (const cle in produit) {
  console.log(cle, produit[cle]);
}

// Lister les clés / valeurs
Object.keys(produit);    // ["nom", "prix", "promo"]
Object.values(produit);  // ["Laptop", 799, true]
Object.entries(produit); // [["nom","Laptop"], ["prix",799], ...]

4 Destructuring

Extraire proprement des valeurs depuis un tableau ou un objet.

// Tableau
const [a, b, c] = [10, 20, 30];
console.log(a, b, c); // 10 20 30

// Objet
const { nom, prix } = produit;
console.log(nom, prix); // "Laptop" 799

// Avec renommage
const { nom: titreProduit } = produit;
console.log(titreProduit); // "Laptop"

// Valeur par défaut
const { remise = 0 } = produit;
console.log(remise); // 0 (n'existe pas dans produit)

5 Spread & Rest

// Spread — étaler un tableau/objet
const tab1 = [1, 2, 3];
const tab2 = [4, 5, 6];
const fusion = [...tab1, ...tab2]; // [1, 2, 3, 4, 5, 6]

// Copie (pas de référence partagée)
const copie = [...tab1];

// Spread d'objet (merge)
const base    = { couleur: "rouge", taille: "M" };
const updated = { ...base, taille: "L", promo: true };
// { couleur: "rouge", taille: "L", promo: true }

// Rest — ramasser le reste des arguments
function logTout(premier, ...reste) {
  console.log("Premier :", premier);
  console.log("Reste :", reste);
}
logTout(1, 2, 3, 4); // Premier: 1, Reste: [2, 3, 4]

Résumé rapide

MéthodeEntrée → Sortie
map()tableau → tableau transformé
filter()tableau → tableau filtré
find()tableau → un élément (ou undefined)
reduce()tableau → une valeur
...spreadcopie / fusion
📊

Mini-Projet

Manipule des collections de données avec map, filter et reduce dans un cas réel.

Exercices & Solutions

Télécharge les fichiers, ouvre-les dans ton éditeur et travaille directement dedans.

📝 exercices.js

5 exercices sur filter, map, reduce, destructuring et le groupement par catégorie.

🟢 ×2 Facile 🟡 ×2 Moyen 🔴 ×1 Difficile
⬇ Télécharger
solutions.js

Corrections complètes. À consulter après avoir essayé.

Corrigé complet Best practices
⬇ Télécharger
🧠 Tester mes connaissances