Array.
Réduit tout le tableau à une seule valeur, par exemple une somme, un objet ou un nouveau tableau.
- Renvoie
- La valeur finale de l’accumulateur.
- Modifie l’original
- Non
Exemple
#const cart = [
{ name: 'Cours HTML', price: 49 },
{ name: 'Cours CSS', price: 59 },
{ name: 'Cours JS', price: 79 }
]
const total = cart.reduce((sum, item) => sum + item.price, 0)
console.log(total)Définition et utilisation
#La méthode reduce() parcourt le tableau et, à chaque étape, combine l’élément courant avec le résultat accumulé jusque-là, appelé l’accumulateur. À la fin, elle renvoie la valeur finale de l’accumulateur.
Elle permet de calculer une somme ou une moyenne, de regrouper des éléments dans un objet, d’aplatir un tableau ou de construire un compteur d’occurrences. C’est la méthode de tableau la plus polyvalente.
Donnez toujours une valeur initiale en second argument. Sans elle, reduce() utilise le premier élément comme point de départ, et lève une erreur sur un tableau vide.
Syntaxe
#array.reduce(callbackFn)
array.reduce(callbackFn, initialValue)Paramètres
#callbackFn
function (accumulator, element, index, array)
Fonction qui combine l’accumulateur avec l’élément courant. Son résultat devient le nouvel accumulateur.initialValue
optionnelle
Valeur initiale de l’accumulateur, par exemple0,[]ou{}.
Plus d’exemples
#const answers = ['A', 'C', 'A', 'B', 'A', 'C']
const counts = answers.reduce((acc, answer) => {
acc[answer] = (acc[answer] ?? 0) + 1
return acc
}, {})
console.log(counts)const points = [80, 95, 70]
const average = points.reduce((sum, p) => sum + p, 0) / points.length
console.log(average)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si
reduce()devient difficile à lire, une simple bouclefor...ofest parfois un meilleur choix. - Pour regrouper des éléments, les navigateurs récents proposent
Object.groupBy(), plus clair qu’unreduce()manuel.
Entrées associées
#- Array.prototype.map()Crée un nouveau tableau avec les résultats de l’appel d’une fonction pour chaque élément.
- Array.prototype.filter()Crée un nouveau tableau avec les éléments pour lesquels la fonction a renvoyé true.
- Array.prototype.forEach()Appelle une fonction pour chaque élément du tableau.
- Object.groupBy()Regroupe des éléments selon une clé renvoyée par une fonction.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.