Als Entwickler liebe ich es, vor allem in JavaScript zu programmieren. Nach meiner Erfahrung ist die Verwendung der Reduktionsfunktion eine der schwierigsten Aufgaben in JS. Lassen Sie mich zunächst auf das Reduce-Konzept eingehen!
In Wikipedia hat es viele Namen, nämlich.
Reduzieren
Falten
Akkumulieren
Aggregat
Komprimieren
Diese Funktion faltet eine Liste in einen beliebigen Datentyp. Es geht darum, eine Struktur in einen einzigen Wert zu zerlegen. Es ist wie das Falten einer Schachtel! Mit Reduzieren können Sie ein Array [1,2,3,4,5] in die Zahl 15 umwandeln, indem Sie alle addieren.
Wie war es in der Vergangenheit?Angenommen, Sie benötigen eine Schleife, um eine Liste in eine Zahl zu falten.
const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; let total = 0; for (let i = 0; i < numbers.length; i++) { total = add(total, numbers[i]); } console.log(total);
Wenn Sie die Reduktionsfunktion verwenden, benötigen Sie lediglich eine Schleife und die Funktion „Addieren“. Der Code wird wie folgt aussehen:
const add = (x, y) => x + y; const numbers = [1, 2, 3, 4, 5]; numbers.reduce(add);
Sehen Sie, so hat es das Codieren leicht gemacht!
Beachten Sie vorerst JavaScript, das keine Schleifen-, Rekursions- oder Array-Methoden wie forEach, some, find usw. verwenden kann. Es sind also nur noch drei Karten übrig, die gefiltert und verkleinert werden. Unsere Arbeit als Programmierer hat sich jedoch nicht geändert. Wir brauchen noch drei Arten von Funktionen in unseren Apps.
-> Listen filtern
-> Listen transformieren
-> Konvertieren von Listen in Datentypen. Zeichenfolge, Boolescher Wert, Zahl, Objekt
Die oben genannte Herausforderung kann einfach mit Tools zum Filtern, Zuordnen und Reduzieren gelöst werden.
Array.filter beurteilt ListenWas passiert, wenn eine neue Liste mit einigen Elementen entfernt werden soll, z. B. wenn der Benutzer Ihre Kontaktliste durchsucht? Erstellen Sie daher einfach eine Funktion, die basierend auf ihrer Eingabe (einem Prädikat) true oder false zurückgibt.
const isEven = (x) => x % 2 === 0;
Schließen Sie es jetzt an einen Filter an, um dies auf eine gesamte Liste anzuwenden.
const numbers = [1, 2, 3, 4, 5]; numbers.filter(isEven);
Array.map transformiert ListenDas Konvertieren von Listen in andere Listen ist die Front-End-Entwicklung auf den Punkt gebracht. Daher deckt die Karte einen Großteil Ihrer Listenarbeit ab.
Angenommen, unsere Anwendung ruft eine API für die Liste der Benutzer auf, und wir müssen den Namen jedes Benutzers auf dem Bildschirm anzeigen. Erstellen Sie einfach eine Funktion, die den Namen eines Benutzers zurückgibt.
const getUserName = (user) => user.name;
Schließen Sie es jetzt an die Karte an, um es für eine gesamte Liste der Benutzer auszuführen.
users.map(getUserName)
Array.reduce kann dies für Sie tunArray.reduce verwendet zwei Parameter
1) Ein Anfangswert (optional)
Wenn Sie keinen Anfangswert angeben, wird die Funktion standardmäßig auf das erste Element der Liste reduziert.
Zum Summieren einfacher Zahlen schreiben Sie:
[1, 2, 3].reduce((total, current) => total + current);/source> In case, you give an initial value of zero, you will use this code: <source lang="markdown"> [{ age: 1 }, { age: 2 }, { age: 3 }] .reduce((total, obj) => total + obj.age, 0);
2) Das Reduzierstück
Beim Reduzieren von Schleifen über der Liste werden dem Reduzierer weniger als zwei Parameter zugeführt:
-> Aktueller Wert: Der aktuelle Wert ist selbsterklärend, genau wie wenn Sie die Matrix [i] in einer regulären Schleife verwenden. Der Akkumulator ist jedoch ein Computerbegriff, der beängstigend klingt und eigentlich einfach ist.
-> Akku: Wie können Sie beim Surfen im Internet das Gesamtalter der Benutzer nachverfolgen? Sie benötigen eine Zählervariable, um sie zu behalten. Das ist der Akku. Dies ist der endgültige Wert, der nach Beendigung reduziert wird.
Bei jedem Schritt des Zyklus speist es den letzten Akkumulator und das aktuelle Element zu seinem Reduzierer. Was der Reduzierer zurückgibt, wird zum nächsten Akku. Der Zyklus endet, wenn die Liste endet und einen einzelnen reduzierten Wert hat.
Wenn Sie der Meinung sind, dass Karten- und Filterfunktionen nicht ausreichen, können Sie das Spiel mit Reduzieren ausführen. Es kann all das tun, was Map und Filter tun, und alle anderen Dinge, die eine Schleife über ein Array beinhalten.
Lassen Sie uns anhand eines Beispiels das Alter der Benutzer berechnen. Betrachten Sie das Alter der Benutzer als 29.30, 31 und 32 Jahre.
const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ];
Auf der anderen Seite können map und filter nur Arrays zurückgeben, aber wir brauchen eine Nummer!
users.map(?); users.filter(?);
Wenn wir Schleifen hätten, würden wir einfach die Benutzer durchgehen und ihr Alter in einem Zähler ablesen! Es kann jedoch einfacher sein, die Funktion zu reduzieren.
users.reduce((total, currentUser) => total + currentUser.age, 0);
Die Verwendung von console.log in jedem Schritt ist die einfachste Möglichkeit, die oben genannten Schritte auszuführen.
const users = [ { name: 'Mariam', age: 29 }, { name: 'Kenstar', age: 30 }, { name: 'Saransh', age: 31 }, { name: 'Geoffie', age: 32 }, ]; const reducer = (total, currentUser) => { console.log('current total:', total); console.log('currentUser:', currentUser); // just for spacing console.log('\n'); return total + currentUser.age; } users.reduce(reducer, 0);
Fassen Sie den gesamten Code in 6 Schritten zusammen:
-> Definieren Sie zunächst die Reduktionsfunktion und ihre 3 Parameter.
-> Initialisieren Sie den Akku mit dem Initialisierungswert. Es wird jede Schleife ändern.
-> Beginnen Sie nun mit dem Durchlaufen des angegebenen Arrays.
-> Erfassen Sie das aktuelle Element des Arrays für diesen Zyklus.
-> Es ist Zeit, den Reduzierer mit dem Akku & currentItem aufzurufen und als neuen Akku zu speichern
-> Zuletzt wird der Akku gewechselt, wenn die Schleife beendet ist und zurückgegeben.