Ein Leitfaden Für Die Reduzierung Methode In Javascript

von Josh Pitzalis

Die reduce-Methode von JavaScript ist einer der Eckpfeiler der funktionalen Programmierung. Lassen Sie uns untersuchen, wie es funktioniert, wann Sie es verwenden sollten, und einige der coolen Dinge, die es tun kann.

Eine grundlegende Reduktion

Verwenden Sie es, wenn: Sie haben ein Array von Beträgen und möchten sie alle addieren.,

const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

Wie benutzt man es:

• In diesem Beispiel akzeptiert Reduce zwei Parameter, den Gesamtbetrag und den aktuellen Betrag.
• Die reduce-Methode durchläuft jede Zahl im Array ähnlich wie in einer for-Schleife.
• Wenn die Schleife startet, ist der Gesamtwert die Zahl ganz links (29.76) und der aktuelle Betrag ist der daneben (41.85).
• In diesem speziellen Beispiel möchten wir den aktuellen Betrag zur Gesamtsumme hinzufügen.,
• Die Berechnung wird für jeden Betrag im Array wiederholt, aber jedes Mal, wenn sich der aktuelle Wert auf die nächste Zahl im Array ändert, wird er nach rechts verschoben.
• Wenn im Array keine Zahlen mehr vorhanden sind, gibt die Methode den Gesamtwert zurück.

Die ES5-Version der Reduce-Methode in JavaScript

Wenn Sie noch nie die ES6-Syntax verwendet haben, lassen Sie sich vom obigen Beispiel nicht einschüchtern., Es ist genau das gleiche wie beim Schreiben:

var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11

Wir verwenden const anstelle von var und ersetzen das Wort function durch einen „fetten Pfeil“ (=>) nach den Parametern und lassen das Wort „rückkehr“.

Ich verwende die ES6-Syntax für den Rest der Beispiele, da sie prägnanter ist und weniger Platz für Fehler lässt.

Finden Sie einen Durchschnitt mit der Reduce-Methode in JavaScript

Anstatt die Summe zu protokollieren, können Sie die Summe durch die Länge des Arrays dividieren, bevor Sie einen endgültigen Wert zurückgeben.,

Der Weg dazu besteht darin, die anderen Argumente in der reduce Methode zu nutzen. Das erste dieser Argumente ist der index. Ähnlich wie bei einer for-Schleife bezieht sich der Index auf die Häufigkeit, mit der der Reduzierer das Array durchlaufen hat. Das Letzte argument ist das array selbst.

Als Reduktionen zuordnen und filtern

Wenn Sie mit der Reduktionsfunktion einen Durchschnitt ausspucken können, können Sie ihn beliebig verwenden.,

Sie können beispielsweise die Summe oder die Hälfte jeder Zahl verdoppeln, bevor Sie sie addieren, oder eine if-Anweisung innerhalb des Reduzierers verwenden, um nur Zahlen hinzuzufügen, die größer als 10 sind. Mein Punkt ist, dass die Reduce-Methode in JavaScript Ihnen einen Mini-CodePen gibt, in dem Sie jede gewünschte Logik schreiben können. Es wird die Logik für jeden Betrag im Array wiederholt und dann einen einzelnen Wert zurückgegeben.

Die Sache ist, Sie müssen nicht immer einen einzelnen Wert zurückgeben. Sie können ein Array in ein neues Array reduzieren.,

Reduzieren wir beispielsweise ein Array von Beträgen in ein anderes Array, in dem jeder Betrag verdoppelt wird. Dazu müssen wir den Anfangswert für unseren Akkumulator auf ein leeres Array setzen.

Der Anfangswert ist der Wert des Gesamtparameters, wenn die Reduktion beginnt. Sie legen den Anfangswert fest, indem Sie ein Komma hinzufügen, gefolgt von Ihrem Anfangswert in den Klammern, jedoch nach den geschweiften Klammern (im folgenden Beispiel fett gedruckt).

const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);

In früheren Beispielen war der Anfangswert Null, also habe ich ihn weggelassen., Wenn der Anfangswert weggelassen wird, wird der Gesamtwert standardmäßig auf den ersten Betrag im Array gesetzt.

Indem wir den Anfangswert auf ein leeres Array setzen, können wir jeden Betrag in die Summe verschieben. Wenn wir ein Array von Werten in ein anderes Array reduzieren möchten, in dem jeder Wert verdoppelt wird, müssen wir den Betrag * 2 drücken. Dann geben wir die Summe zurück, wenn keine Beträge mehr zu drücken sind.

const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // 

Wir haben ein neues Array erstellt, in dem jeder Betrag verdoppelt wird. Wir könnten auch Zahlen herausfiltern, die wir nicht verdoppeln möchten, indem wir eine if Anweisung in unserem Reduzierer hinzufügen.,

Diese Operationen sind die Map-und Filtermethoden, die als Reduce-Methode neu geschrieben wurden.

Für diese Beispiele wäre es sinnvoller, map oder Filter zu verwenden, da sie einfacher zu verwenden sind. Der Vorteil der Verwendung von reduce kommt ins Spiel, wenn Sie zusammen abbilden und filtern möchten und viele Daten zur Verfügung stehen.

Wenn Sie Map und Filter verketten, erledigen Sie die Arbeit zweimal. Sie filtern jeden einzelnen Wert und ordnen dann die verbleibenden Werte zu. Mit reduce können Sie in einem einzigen Durchgang filtern und dann zuordnen.,

Verwenden Sie Map und Filter, aber wenn Sie anfangen, viele Methoden miteinander zu verketten, wissen Sie jetzt, dass es schneller ist, die Daten stattdessen zu reduzieren.

Erstellen einer Tally mit der Reduce-Methode in JavaScript

Verwenden Sie diese, wenn: Sie eine Sammlung von Elementen haben und wissen möchten, wie viele der einzelnen Elemente sich in der Sammlung befinden.

Um Elemente in einem Array abzubilden, muss unser Anfangswert ein leeres Objekt sein, kein leeres Array wie im letzten Beispiel.

Da wir ein Objekt zurückgeben werden, können wir jetzt Schlüssel-Wert-Paare in der Summe speichern.,

fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})

Bei unserem ersten Durchgang möchten wir, dass der Name des ersten Schlüssels unser aktueller Wert ist, und wir möchten ihm den Wert 1 geben.

Dies gibt uns ein Objekt mit allen Früchten als Schlüssel mit jeweils einem Wert von 1. Wir möchten, dass die Menge jeder Frucht zunimmt, wenn sie sich wiederholt.

Dazu prüfen wir in unserer zweiten Schleife, ob unsere Werte einen Schlüssel mit der aktuellen Frucht des Reduzierers enthalten. Wenn nicht, dann schaffen wir es. Wenn dies der Fall ist, erhöhen wir den Betrag um eins.

fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});

Ich habe genau dieselbe Logik prägnanter nach oben geschrieben.,

Abflachen eines Arrays von Arrays mit der Reduce-Methode In JavaScript

Wir können reduce verwenden, um verschachtelte Mengen in ein einzelnes Array abzuflachen.

Wir setzen den Anfangswert auf ein leeres Array und verketten dann den aktuellen Wert mit der Summe.

const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // 

Informationen sind meistens komplizierter verschachtelt. Nehmen wir zum Beispiel an,wir möchten nur alle Farben in der Datenvariablen unten.

const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];

Wir werden jedes Objekt durchgehen und die Farben herausziehen. Wir tun dies, indem wir Menge zeigen.c für jedes Objekt im array., Wir verwenden dann eine forEach Schleife, um jeden Wert im verschachtelten Array in out total.

Wenn wir nur eine eindeutige Nummer benötigen, können wir überprüfen, ob die Nummer bereits insgesamt vorhanden ist, bevor wir sie drücken.

Piping mit Reduce

Ein interessanter Aspekt der Reduce-Methode in JavaScript ist, dass Sie über Funktionen sowie Zahlen und Zeichenfolgen reduzieren können.

Angenommen, wir haben eine Sammlung einfacher mathematischer Funktionen. mit diesen Funktionen können wir einen Betrag erhöhen, dekrementieren, verdoppeln und halbieren.,

Aus irgendeinem Grund müssen wir erhöhen, dann verdoppeln und dann einen Betrag dekrementieren.

Sie können eine Funktion schreiben, die eine Eingabe annimmt und zurückgibt (input + 1) * 2 -1. Das Problem ist, dass wir wissen, dass wir den Betrag dreimal erhöhen, dann verdoppeln, dann dekrementieren und dann irgendwann in der Zukunft halbieren müssen. Wir möchten unsere Funktion nicht jedes Mal neu schreiben müssen, daher verwenden wir reduce, um eine Pipeline zu erstellen.

Eine Pipeline ist ein Begriff, der für eine Liste von Funktionen verwendet wird, die einen Anfangswert in einen Endwert umwandeln., Unsere Pipeline wird aus unseren drei Funktionen in der Reihenfolge bestehen, in der wir sie verwenden möchten.

let pipeline = ;

Anstatt ein Array von Werten zu reduzieren, reduzieren wir über unsere Pipeline von Funktionen. Dies funktioniert, weil wir den Anfangswert als den Betrag festlegen, den wir transformieren möchten.

const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3

Da die Pipeline ein Array ist, kann sie leicht geändert werden. Wenn wir etwas dreimal dekrementieren, verdoppeln, dekrementieren und halbieren möchten , ändern wir einfach die Pipeline.

var pipeline = ;

Die Reduktionsfunktion bleibt genau gleich.,

Dumme Fehler zu vermeiden

Wenn Sie keinen Anfangswert übergeben, wird davon ausgegangen, dass das erste Element in Ihrem Array Ihr Anfangswert ist. Dies hat in den ersten Beispielen gut funktioniert, da wir eine Liste von Zahlen addiert haben.

Wenn Sie versuchen, Obst zu tally, und Sie lassen den Anfangswert dann die Dinge seltsam. Die Nichteingabe eines Anfangswerts ist ein einfacher Fehler und eines der ersten Dinge, die Sie beim Debuggen überprüfen sollten.

Ein weiterer häufiger Fehler besteht darin, zu vergessen, die Summe zurückzugeben. Sie müssen etwas zurückgeben, damit die reduce-Funktion funktioniert., Überprüfen Sie immer doppelt und stellen Sie sicher, dass Sie tatsächlich den gewünschten Wert zurückgeben.

Werkzeuge, Tipps & Referenzen

• Alles in diesem Beitrag stammt aus einer fantastischen Videoserie über egghead namens Introducing Reduce. Ich gebe Mykola Bilokonsky volle Anerkennung und bin ihm dankbar für alles, was ich jetzt über die Verwendung der Reduce-Methode in JavaScript weiß. Ich habe versucht, viel von dem, was er in meinen eigenen Worten erklärt, als Übung umzuschreiben, um jedes Konzept besser zu verstehen., Außerdem ist es für mich einfacher, auf einen Artikel zu verweisen, als auf ein Video, wenn ich mich daran erinnern muss, wie ich etwas tun soll.
• Die MDN-Reduktionsdokumentation kennzeichnet das, was ich insgesamt accumulator. Es ist wichtig, dies zu wissen, da die meisten Leute es als Akkumulator bezeichnen, wenn Sie online darüber lesen. Einige Leute nennen es prev wie im vorherigen Wert. Es bezieht sich alles auf dasselbe. Ich fand es einfacher, an eine Summe zu denken, als ich reduce lernte.,
• Wenn Sie mit reduce üben möchten, empfehle ich Ihnen, sich bei freeCodeCamp anzumelden und so viele der Zwischenalgorithmen wie möglich mit reduce.
• Wenn die‘ const ‚ – Variablen in den Beispielausschnitten für Sie neu sind, habe ich einen weiteren Artikel über ES6-Variablen geschrieben und warum Sie sie möglicherweise verwenden möchten.
• Ich habe auch einen Artikel mit dem Titel The Trouble With Loops geschrieben, in dem erklärt wird, wie map() und filter() verwendet werden, wenn die für Sie neu sind.

Danke fürs Lesen! Wenn Sie möchten, um benachrichtigt zu werden, wenn ich Schreibe einen neuen Artikel, geben Sie bitte hier Ihre E-Mail.,

Und wenn Ihnen der Artikel gefallen hat, teilen Sie ihn bitte in den sozialen Medien, damit andere ihn finden können.