Einführung in Funktionen höherer Ordnung in JavaScript

Per Definition ist eine Funktion höherer Ordnung eine Funktion, die zumindest eine oder mehrere andere Funktionen als Argumente empfängt oder eine andere Funktion als Ergebnis zurückgibt. In diesem Tutorial konzentrieren wir uns auf Standardbibliotheksfunktionen als Filter, Karte und Reduzierung: Wir werden sehen, wann sie nützlich sein können und wie sie verwendet werden können.

In diesem Tutorial lernen Sie:

• Was ist eine Funktion höherer Ordnung.
• Warum können wir Funktionen höherer Ordnung in JavaScript verwenden.
• Wie und wann man Filter verwendet, kartieren und reduziert Funktionen.

Was ist eine Funktion höherer Ordnung ?

In JavaScript -Funktionen sind erstklassige Objekte: Sie können Variablen zugewiesen, als Argumente an andere Funktionen übergeben oder von anderen Funktionen zurückgegeben werden. Die Verwendung von Funktionen höherer Ordnung basiert auf diesen Besonderheiten. Wir definieren eine Funktion höherer Ordnung als eine Funktion, die zumindest andere Funktionen als Argumente akzeptiert, oder gibt eine andere Funktion als Ergebnis zurück. In diesem Tutorial konzentrieren wir uns auf Standardbibliotheksfunktionen als Filter, Karte Und reduzieren.

In diesem Tutorial werden wir eine Verwendung nutzen Pfeilfunktionen: Wenn Sie mehr über diese neue Funktionssyntax erfahren möchten, können Sie dieses Tutorial überprüfen, das wir zu diesem Thema veröffentlicht haben.

Filter oder Array.Prototyp.Filter

Die erste Funktion, über die wir sprechen werden, ist Filter, Oder um seinen vollständigen Namen zu verwenden, Array.Prototyp.Filter. Diese Funktion ist eigentlich eine Methode der Array Objekt und was es tut, ist sehr einfach: Es gibt ein neues Array zurück, das aus den Elementen des ursprünglichen Arrays besteht, die den in seinem Körper implementierten Test bestehen.

Um klar zu sein, sehen wir uns ein Beispiel an. Angenommen, wir haben eine Reihe von Wörtern und wollen Wörter „filtern“, die aus genau drei Buchstaben komponiert werden. Wir könnten erhalten, was wir wollen, indem wir a verwenden für Schleife, Schreiben:

const words = ["House", "Pen", "Buch", "Computer", "Car"]; const Shortwords = []; // Wir könnten einen Standard-C-Stil für Schleife verwenden… für (lass i = 0; i < words.length; i++)  if (words[i].length == 3)  shortWords.push(words[i])   //… or a for… of loop for (let word of words)  if (word.length == 3)  shortWords.push(word);   

Beide Beispiele oben und die mit beiden erzielen wir das gleiche Ergebnis. Nachdem der Code ausgeführt wurde, haben das Array "Kurzwörter" zwei Mitglieder: "Stift" und "Auto". Sie können jedoch feststellen, dass insbesondere das erste Beispiel ziemlich ausführlich ist. Mal sehen, wie wir das gleiche Ergebnis mit weniger Code erzielen können, indem wir verwenden Filter:

const Shortwords = Wörter.Filter ((Element) => Element.Länge == 3);

Wir haben genau das gleiche Ergebnis erhalten. Es gibt jedoch einen Unterschied: diesmal auch durch die Verwendung eines Pfeil Funktion, wir haben alles in nur einer Codezeile geschrieben!. Hier ist, wie Filter Werke: Es akzeptiert nur ein „obligatorisches“ Argument, das eine andere Funktion ist, ein Rückruf.

Dieser Rückruf akzeptiert wiederum ein Argument, das das Element des derzeit verarbeiteten ursprünglichen Arrays ist. Wenn das Element den Test besteht (in diesem Fall, wenn die Länge der Zeichenfolge gleich 3 ist), wird das Element im Neuarray eingefügt.

Karte oder Array.Prototyp.Karte

Der Karte (Array.Prototyp.Karte) Methode, macht etwas anderes. Es akzeptiert auch eine Rückruffunktion als einziges obligatorisches Argument, gibt jedoch ein neues Array zurück, das aus den Elementen besteht, die sich aus der Anwendung dieser Rückruf auf alle Elemente des Originalarrays ergeben.

Ein Beispiel wird alles klarstellen. Nehmen wir diesmal an, wir möchten ein Array erhalten, das alle Saiten innerhalb des Arrays „Wörter“ enthalten sollte, jedoch in Form von oberen Fällen. In nur einer Zeile konnten wir schreiben:

const oberen Zapfwörter = Wörter.Karte ((Element) => Element.touppercase ());

Nach dem obigen Code wird das Array „oberen Zapfen“ sein:

["Haus", "Stift", "Buch", "Computer", "Auto"]

Der Rückruf als Argument von akzeptiert von Karte, hat nur ein obligatorisches Argument, das das Element des ursprünglichen Arrays ist, das verarbeitet wird. Der Wert, der sich aus der Anwendung des Rückrufs auf jedes Element des ursprünglichen Arrays ergibt. Das Ergebnis ist in diesem Fall ein neues Array.

Reduzieren oder Array.Prototyp.reduzieren

Der reduzieren, oder Array.Prototyp.reduzieren Die Methode funktioniert anders: Sie akzeptiert einen Rückruf, der zwei obligatorische Argumente erfordert. Der erste ist der sogenannte Akkumulator, und der zweite ist der aktueller Wert. Anstatt ein neues Array zu produzieren, verwendet diese Funktion höherer Ordnung den bereitgestellten Rückruf, auch aufgerufen Reduzierer, Zu reduzieren Das Array zu einem einzigen Wert, der zurückgegeben wird. Es ist tatsächlich einfacher als es aussieht. Lassen Sie uns ein grundlegendes Beispiel sehen.

Angenommen, wir haben ein Array mit einigen Zahlen:

const nummern = [15, 0.50, 200];

Stellen Sie sich nun vor, wir wollen die Summe aller Zahlen in das Array erhalten. Auch hier konnten wir eine Schleife verwenden oder, wie wir demonstrieren wollen, reduzieren, auf die folgende Weise:

Lassen Sie TotalPrice = Zahlen.reduzieren ((Akkumulator, Stromwert) => Akkumulator + Stromwert);

Der reduzieren Die Methode akzeptiert, wie oben erwähnt. Der erste ist der Akkumulator: Dieses Argument sammelt die Ergebnisse jedes Mal an, wenn die Rückruffunktion aufgerufen wird. Der zweite ist aktueller Wert, Dies repräsentiert das aktuelle Element des ursprünglichen Arrays, das verarbeitet wird.

Eine wichtige Sache zu bemerken, ist, dass, wenn sie sonst nicht angegeben sind (wir werden in einem Moment, wie wir es können), das erste Mal, wenn die Rückruffunktion aufgerufen wird, der Wert des Akkumulators das erste Element des Arrays sein wird. Wir können das erkennen, indem wir einfach den Wert des Werts protokollieren Akkumulator und von der aktueller Wert, Jedes Mal, wenn der Rückruf ausgeführt wird:

Lassen Sie TotalPrice = Zahlen.Reduzieren ((Akkumulator, CurrentValue) => Konsole.log (akkumulator, currentValue); Return Accumulator + CurrentValue; ); 

Die Ausgabe des obigen Codes ist:

15 0.5 15.5 200 

Wie Sie bemerken können, wenn ein Anfangswert für die Akkumulator wird nicht explizit bereitgestellt, das erste Element des Arrays wird verwendet (15) und sehr wichtig, die Index des ersten Elements, das vom Array verarbeitet wird, ist1, In diesem Fall ist das erste Element, das verarbeitet wird 0.5 (der zweite).

Wenn Sie darüber nachdenken, ist dies Sinn: Ansonsten würde das erste Element des Arrays zweimal gezählt werden! (Es kann erwähnenswert sein, dass wir den Index des ersten Elements des zu verarbeitenden Arrays manuell angeben können, indem wir die verwenden CurrentIndex optionales Argument des Rückrufs, die ihn danach bereitstellen aktueller Wert). Wie erwartet der Endwert von Totalprice wird sein 215.5:

TotalPrice 215.5 

Im obigen Beispiel waren die Elemente des ursprünglichen Arrays „Zahlen“ einfache Zahlen, also Primärtypen In JavaScript. Was wäre, wenn sie Objekte wären? Angenommen, wir haben eine Reihe von Objekten mit jeweils drei Eigenschaften: einen Namen, einen Preis und eine Preiswährung:

const its = [name: 'buch', Preis: 15, Währung: 'Eur', Name: 'Car', Preis: 15000, Währung: 'Eur', Name: 'Laptop', Preis: 1200 , Währung: 'Eur']; 

Was wir hier erhalten möchten, ist die Summe aller Artikelpreise. Es entsteht sofort ein Problem: Wir möchten nicht jedes Element des Arrays direkt zusammenfassen, da wir in diesem Fall mit Objekten arbeiten, aber die Preis Eigentum jedes einzelnen. Wir sollten daher einen optionalen Parameter verwenden, der von akzeptiert wird reduzieren, welches ist Ursprünglicher Wert:

lass FinalPrice = Artikel.Reduzieren ((Akkumulator, Stromwert) => Akkumulator + Stromwert.Preis, 0)

Der Endgültiger Preis Wir erhalten erwartungsgemäß wie erwartet 16215. Wenn wir das nicht angegeben hätten Ursprünglicher Wert, Durch die Bereitstellung der Rückruffunktion (0) wäre das erste Element des Arrays „Elemente“ als Startwert für die verwendet worden Akkumulator. Da dies ein Objekt ist, wäre das Ergebnis nicht wie erwartet gewesen!

Schlussfolgerungen

In diesem Tutorial haben wir gelernt zu wissen, was eine Funktion höherer Ordnung definiert und warum es möglich ist, sie in JavaScript zu verwenden. Wir haben auch gelernt, drei in der Standard -JavaScript -Bibliothek enthaltene Funktionen höherer Ordnung zu kennen und zu verwenden, wie z Filter, Karte Und reduzieren. Wenn Sie an anderen JavaScript -Themen interessiert sind, können Sie unsere Tutorials zu Versprechungen oder Pfeilfunktionen überprüfen.

Verwandte Linux -Tutorials:

• Eine Einführung in Linux -Automatisierung, Tools und Techniken
• Mastering -Bash -Skriptschleifen beherrschen
• Dinge zu installieren auf Ubuntu 20.04
• Mint 20: Besser als Ubuntu und Microsoft Windows?
• Dinge zu tun nach der Installation Ubuntu 20.04 fokale Fossa Linux
• Verschachtelte Schleifen in Bash -Skripten
• Wie oft müssen Sie Ihren Linux -Server neu starten??
• GDB -Debugging -Tutorial für Anfänger
• Umgang mit Benutzereingaben in Bash -Skripten
• Wie man Kali Linux und Windows 10 Dual -Boot -Start hat