Verstehen Sie JavaScript Reduce Mit 5 Beispielen

Diereduce() – Methode für JavaScript-Arrays führt bei jedem Element des Arrays eine „reducer“ – Funktion aus und übergibt den Rückgabewert vom vorherigen reducercall an den nächsten reducer. Die reduce() Funktion ist eine häufige Ursache für Verwirrung, kann aber auch Ihren Code in Kombination mit anderen funktionalen Programmierabstraktionen lesbarer machen.,Hier sind 4 allgemeine Beispiele und 1 nicht so häufiges Beispiel, das zeigt, wie reduce().

Summieren eines Arrays von Zahlen

Die meisten reduce() Tutorials beginnen mit diesem Beispiel: Bei einem Array von Zahlen berechnen Sie die Summe. So können Sie ein Array mit einer einfachen alten for Schleife zusammenfassen.,

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

Hier ist ein äquivalentes Beispiel mit reduce():

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

Die reduce() Die ersten 2 Parameter der Funktion sind eine Funktion reducer() undeine beliebige initialValue. JavaScript ruft dann die reducer() auf jederelement des Arrays mit dem Akkumulatorwert als erster Parameter.Der Akkumulator beginnt als initialValue, und dann verwendet JavaScript den Rückgabewert jedes reduce() Aufrufs als neuer Akkumulator.,

Sprechen ist Billig, zeig mir den code. Hier ist ein kurzes Beispiel, wie Sie eine vereinfachte reduce() – Funktion mit for – Schleifen implementieren können.

Summieren eines Arrays numerischer Eigenschaften

Die Funktion reduce() an sich ist oft verwirrender als hilfreich.Wenn Sie nur ein Array von Zahlen summieren müssen, ist es möglicherweise besser, eine for Schleife zu verwenden., In Kombination mit anderen Array-Methoden wiefilter() und map()siehtreduce() jedoch ansprechender aus.

Angenommen, Sie haben ein Array von Zeilenelementen und möchten berechnendie Summe der Eigenschaft total jedes Zeilenelements.

Hier ist eine Möglichkeit, die Zeilenelemente total mit reduce():

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

Dies funktioniert, ist jedoch weniger zusammensetzbar. Eine bessere Alternative ist zuerstmap() um die total.,

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

Warum ist dieser zweite Ansatz besser? Weil Sie thereducer in eine Funktion sum() abstrahieren und überall dort wiederverwenden können, wo Sie ein Array summieren müssen.

Dies ist wichtig, weil, während Sie denken sumReducer() wird nie ändern, es wird. Der obige Code berücksichtigt beispielsweise nicht die Tatsache, dass0.1 + 0.2 !== 0.3 in JavaScript. Dies ist ein häufiger Fehler bei der Berechnungpreise in einer interpretierten Sprache. Binäre Gleitkommazahlen sind seltsam.,Sie müssen also tatsächlich runden:

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

reduce() macht es einfach, Logik wie sumReducer() während der gesamten Verkettung Ihrer Appusing-Funktion wiederzuverwenden. So können Sie Ihre Logik einmal ändern, anstatt durch jede for Schleife in Ihrer App zu suchen.

Finden Sie den Maximalwert

Angenommen, Sie haben ein Array von JavaScript-Daten und möchten das neueste Datum finden.

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

Ein Ansatz besteht darin, das Array zu sortieren und das letzte Element im sortedarray., Das funktioniert, ist aber nicht so effizient wie es sein könnte, und das Sortieren eines Datumsarrays in JavaScript ist nicht trivial.

Stattdessen können Sie reduce() und Ihren Reduzierer dazu bringen, das bisher gefundene Datum zurückzugeben.

Gruppieren von Werten

Bei einem Array von Objekten mit einerage Eigenschaft:

const characters = ;

Wie gibt man eine Map zurück, die enthält, wie viele Zeichen eine gegebeneage? Die korrekte Ausgabe für das obige Array wäre beispielsweise{ 29: 2, 59: 1 }.,

So können Sie das mit reduce().

Bonus: Promise Chaining

Angenommen, Sie haben ein Array von asynchronen Funktionen, die Sie in Reihe ausführen möchten.Dafür gibt es eine nicht standardmäßige promise.series-Funktion, aber Sie können dies auch mit reduce().

Weiterfahren

Die Funktion reduce() ist ein leistungsstarkes Werkzeug. Durch das Abstrahieren von Filtersand-Reduzierern können Sie gängige Aufgaben wie das „Summieren eines Zahlenarrays“in einer separaten Funktion konsolidieren, um das Refactoring und das Trocknen von Code zu vereinfachen.