JavaScriptLeçon 10 sur 16
Méthodes des tableaux : map, filter, reduce
Plutôt que d’écrire des boucles à la main, les tableaux ont des méthodes qui prennent une fonction et font le travail. Le code raccourcit et se lit comme une phrase : garde ce qui est en stock, prends les noms.
L’essentiel
- map(fn) crée un nouveau tableau où chaque élément est transformé par la fonction
- filter(fn) crée un nouveau tableau avec seulement les éléments pour lesquels fn renvoie true
- reduce((acc, x) => acc + x, 0) ramène le tableau à une seule valeur, en partant de 0
- find(fn) renvoie le premier qui convient, some(fn) dit s’il y en a au moins un
- Les méthodes s’enchaînent : list.filter(…).map(…)
Exemple
const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((n) => n * 2);const even = numbers.filter((n) => n % 2 === 0);const sum = numbers.reduce((acc, n) => acc + n, 0); console.log(doubled, even, sum);console.log(numbers.find((n) => n > 3), numbers.some((n) => n > 4));console.log(numbers.filter((n) => n > 2).map((n) => n * 10));numbers n’a pas bougé : map et filter renvoient de nouveaux tableaux. Sur la dernière ligne, on a d’abord gardé les nombres supérieurs à 2, puis multiplié chacun par 10.
Exercice
Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.Une boutique en ligne a quatre produits. Gardez ceux en stock (filter), prenez leurs noms (map), additionnez leurs prix (reduce) et trouvez le premier produit en stock à plus de 20 (find). Sortie : Mug, Notebook, Hoodie, puis Total: 65 et First over 20: Hoodie.
Sortie
Ce que le programme affiche apparaîtra ici.