map, filter, reduce, find, destructuring, spread/rest
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"
map() — transformer chaque élémentconst 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émentsconst 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 correspondconst 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 valeurconst 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
reduce peut tout faire — somme, max, objet, tableau aplati.
// Oublier la valeur initiale (0 ici)
[].reduce((acc, n) => acc + n); // TypeError !
[].reduce((acc, n) => acc + n, 0); // 0 ← correct
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], ...]
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)
// 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]
| Méthode | Entrée → Sortie |
|---|---|
map() | tableau → tableau transformé |
filter() | tableau → tableau filtré |
find() | tableau → un élément (ou undefined) |
reduce() | tableau → une valeur |
...spread | copie / fusion |
Manipule des collections de données avec map, filter et reduce dans un cas réel.
Télécharge les fichiers, ouvre-les dans ton éditeur et travaille directement dedans.
5 exercices sur filter, map, reduce, destructuring et le groupement par catégorie.
Corrections complètes. À consulter après avoir essayé.