comprendre JavaScript Reduce avec 5 Exemples

la méthodereduce() sur les tableaux JavaScript exécute une fonction « reducer » sur chaque élément du tableau dans l’ordre, en passant la valeur de retour du précédent reducercall au prochain appel reducer. La fonction reduce() est une cause commune de confusion, mais elle peut également rendre votre code beaucoup plus lisible lorsqu’il est combiné avec d’autres abstractions de programmation fonctionnelles.,Voici 4 exemples courants et 1 Exemple pas si commun qui montrent comment utiliser reduce().

Résumant un Tableau de Nombres

la Plupart des reduce() tutoriels commencer avec cet exemple: étant donné un tableau de nombres , calculer la somme. Voici comment vous pouvez résumer un tableau avec une ancienne boucle for.,

function sum(arr) { let sum = 0; for (const val of arr) { sum += val; } return sum;}sum(); // 16

Voici un équivalent exemple à l’aide de reduce():

function sum(arr) { const reducer = (sum, val) => sum + val; const initialValue = 0; return arr.reduce(reducer, initialValue);}sum(); // 16

Le reduce() function 2 premiers paramètres sont fonction reducer() andan arbitraire initialValue. JavaScript appelle ensuite le reducer() sur chaque élément du tableau avec la valeur de l’accumulateur comme premier paramètre.L’accumulateur commence comme initialValue, puis JavaScript utilise la valeur de retour de chaque appel reduce() comme nouvel accumulateur.,

parler est pas cher, montrez-moi le code. Voici donc un exemple rapide de la façon dont vous pourriez implémenter une fonction reduce() simplifiée à l’aide de boucles for.

additionner un tableau de propriétés numériques

la fonctionreduce() en elle-même est souvent plus déroutante qu’utile.Si tout ce que vous devez faire est de additionner un tableau de nombres, vous pourriez être betteroff en utilisant une boucle for., Mais, lorsqu’il est combiné avec d’autres méthodes de tableau commefilter() et map(),reduce() commence à chercher plus attrayant.

par exemple, supposons que vous ayez un tableau d’éléments de ligne et que vous souhaitiez calculer la somme de la propriététotal de chaque élément de ligne.

Voici une façon d’ajouter les éléments total à l’aide de reduce():

lineItems.reduce((sum, li) => sum + li.total, 0); // 17.5

Cela fonctionne, mais c’est moins modulable. Une meilleure alternative est d’abord demap() pour obtenir le total.,

lineItems.map(li => li.total).reduce((sum, val) => sum + val, 0);

pourquoi cette deuxième approche est-elle meilleure? Parce que vous pouvez abstraire thereducer dans une fonction sum(), et le réutiliser partout où vous avez besoin de résumer un tableau.

ceci est important car, bien que vous pensiez quesumReducer() ne changera jamais, il le fera. Par exemple, le code ci-dessus ne tient pas compte du fait que0.1 + 0.2 !== 0.3 en JavaScript. C’est une erreur courante lors du calculprix dans une langue interprétée. Les points flottants binaires sont étranges.,Vous devez donc arrondir:

const { round } = require('lodash');function sumReducer(sum, val) { // Round to 2 decimal places. return _.round(sum + val, 2);}

reduce()facilite la réutilisation de la logique comme sumReducer() tout au long de votre chaînage de fonction appusing. Vous pouvez donc changer votre logique une fois plutôt que de rechercher chaque boucle for dans votre application.

trouver la valeur maximale

par exemple, supposons que vous ayez un tableau de dates JavaScript et que vous souhaitiez trouver la date la plus récente.

const dates = .map(v => new Date(v));

Une approche consiste à trier le tableau et de prendre le dernier élément dans la sortedarray., Cela fonctionne, mais n’est pas aussi efficace que cela pourrait l’être, et le tri d’un tableau de dates en JavaScript n’est pas trivial.

Au Lieu de cela, vous pouvez utiliser reduce() et faire en sorte que votre réducteur renvoie la date la plus récente trouvée jusqu’à présent.

un Regroupement des Valeurs

etant Donné un tableau d’objets avec un age propriétés:

const characters = ;

Comment pouvez vous retourner une carte qui contient le nombre de caractères ont uneage? Par exemple, la sortie correcte sur le tableau ci-dessus serait{ 29: 2, 59: 1 }.,

Voici comment vous pouvez le faire avec reduce().

Bonus: Promise Chaining

supposons que vous ayez un tableau de fonctions asynchrones que vous souhaitez exécuter en série.Il existe une fonction non standard promise.seriespour cela, mais vous pouvez également le faire avec reduce().

avancer

la fonctionreduce() est un outil puissant. En faisant abstraction des filtres et des réducteurs, vous pouvez consolider des tâches courantes telles que « la somme d’un tableau de nombres »dans une fonction distincte pour faciliter la refactorisation et le code DRY-er.