Funktionen höherer Ordnung in JavaScript verstehen

JavaScript ist eine leistungsstarke Sprache, die von den meisten modernen Browsern unterstützt wird, und eine gute Wahl für Anfänger.

Wie viele andere moderne Programmiersprachen unterstützt JavaScript Funktionen, mit denen Sie einen Codeblock isolieren und an anderer Stelle wiederverwenden können. Sie können Variablen auch Funktionen zuweisen und diese wie andere Werte als Parameter übergeben.

Was sind Funktionen höherer Ordnung?

Die einfachste Definition für eine Funktion höherer Ordnung ist eine Funktion, die Operationen an anderen Funktionen ausführt, indem sie diese als Parameter akzeptiert oder zurückgibt. Funktionen höherer Ordnung werden häufig verwendet Paradigma der funktionalen Programmierung. Wenn du bist Ich fange gerade erst mit JavaScript an, Funktionen höherer Ordnung sind möglicherweise etwas schwer zu verstehen.

Betrachten Sie das folgende Beispiel:

Funktionverwandeln(fn) {
lassen resultArray = [];
zurückkehrenFunktion (Array) {
für (lassen ich = 0; i < array.length; i++) {
 resultArray.push (fn (array[i]))
 }
zurückkehren resultArray
 }
}

Im Codeblock oben ist die verwandeln Funktion ist eine Funktion höherer Ordnung, die die übernimmt fn Funktion als Parameter und gibt eine anonyme Funktion zurück, die aufnimmt Array als Parameter.

Der Zweck der verwandeln Die Funktion besteht darin, die Elemente im Array zu ändern. Zunächst definiert der Code eine Variable resultArray und bindet es an ein leeres Array.

Der verwandeln Die Funktion gibt eine anonyme Funktion zurück, die jedes Element in durchläuft Array, übergibt dann das Element an die fn Funktion zur Berechnung und schiebt das Ergebnis hinein resultArray. Nach Abschluss der Schleife gibt die anonyme Funktion die zurück resultArray.

const Funktion1 = transform((X) => X * 2)
Konsole.log (Funktion1([ 2, 3, 4, 5, 6 ])) /* [ 4, 6, 8, 10, 12] */

Der obige Codeblock weist die von zurückgegebene anonyme Funktion zu verwandeln Funktion zur konstanten Variablen Funktion1. fn gibt das Produkt von zurück X was ein Ersatz für ist Array[i].

Der Code übergibt außerdem ein Array als Parameter an Funktion1 und protokolliert dann das Ergebnis in der Konsole. Eine kürzere Schreibweise wäre:

Konsole.log (transform((X) => X * 2)([ 2, 3, 4, 5, 6 ]))

JavaScript verfügt über eine integrierte Funktion höherer Ordnung, die im Grunde das Gleiche tut wie verwandeln, worauf wir später noch eingehen werden.

Hoffentlich beginnen Sie zu verstehen, wie Funktionen höherer Ordnung in JavaScript funktionieren. Schauen Sie sich die folgende Funktion an und sehen Sie, ob Sie erraten können, was sie tut.

FunktionfilterAndTransform(fn, arrayToBeFiltered, Bedingung) {
lassen filteredArray = [];
für (lassen ich = 0; i < arrayToBeFiltered.length; i++) {
Wenn (Bedingung (arrayToBeFiltered[i])) {
lassen y = transform (fn)([ arrayToBeFiltered[i] ])[0]
 filteredArray.push (y)
 } anders {
 filteredArray.push (arrayToBeFiltered[i])
 }
 }
zurückkehren gefiltertesArray
}

Dieser Codeblock definiert eine Funktion, die das tut, was Sie vielleicht vermuten: Sie sucht nach Elementen im Array, die eine bestimmte Bedingung erfüllen, und wandelt sie mit um verwandeln() Funktion. Um diese Funktion zu nutzen, gehen Sie etwa so vor:

filterAndTransform((X) => X * 2, [ 1, 2, 3, 4, 5 ], (x) => x % 20)

im Gegensatz zu den verwandeln Funktion, Die filterAndTransform Die Funktion benötigt zwei Funktionen als Parameter: fn Und Zustand. Der Zustand Die Funktion prüft, ob der übergebene Parameter eine gerade Zahl ist, und gibt true zurück. Andernfalls wird false zurückgegeben.

Wenn Zustand wird zu „true“ aufgelöst (die Bedingung ist erfüllt), erst dann ist die verwandeln Funktion aufgerufen. Diese Logik kann nützlich sein, wenn Sie mit einem Array arbeiten und bestimmte Elemente transformieren möchten. Wenn Sie diesen Code in der Browserkonsole ausführen, sollten Sie die folgende Antwort erhalten:

[ 1, 4, 3, 8, 5 ]

Wie Sie sehen, transformiert die Funktion nur die Elemente, die eine bestimmte Bedingung erfüllen, und lässt die Elemente, die die Bedingung nicht erfüllen, unverändert.

Die Array.map()-Funktion höherer Ordnung in JavaScript

Array-Methoden wie map() sind Funktionen höherer Ordnung, die die Manipulation von Arrays erleichtern. So funktioniert das.

lassen Array = [ 1, 2, 3, 4, 5 ];
lassen transformArray = array.map((X) => X * 2);

Wenn Sie sich anmelden transformiertesArray In der Browserkonsole sollten Sie das gleiche Ergebnis erhalten wie mit verwandeln Funktion bereits erwähnt:

[ 2, 4, 6, 8, 10 ]

array.map() nimmt zwei Parameter auf, der erste Parameter bezieht sich auf das Element selbst, während sich der zweite Parameter auf den Index des Elements (Position im Array) bezieht. Nur mit array.map() Sie können die gleichen Ergebnisse erzielen wie mit filterAndTransform Funktion. So machen Sie es:

lassen Array = [ 1, 2, 3, 4, 5 ];
lassen transformArray = array.map((X) => X % 20? X * 2: X);

Im obigen Codeblock gibt die Funktion das Produkt aus dem aktuellen Element und 2 zurück, wenn das Element gerade ist. Andernfalls wird das Element unverändert zurückgegeben.

Mit dem eingebauten Karte Mit dieser Funktion ist es Ihnen gelungen, die Notwendigkeit mehrerer Codezeilen zu eliminieren, was zu einem viel saubereren Code und einer geringeren Wahrscheinlichkeit des Auftretens von Fehlern führt.

Die Funktion Array.filter() in JavaScript

Wenn Sie die aufrufen Filter Wenn Sie eine Methode für ein Array verwenden, stellen Sie sicher, dass der Rückgabewert der Funktion, die Sie an die Methode übergeben, entweder wahr oder falsch ist. Der Filter Die Methode gibt ein Array zurück, das Elemente enthält, die die übergebene Bedingung erfüllen. Hier erfahren Sie, wie Sie es verwenden.

FunktioncheckFirstLetter(Wort) {
lassen Vokale = „aeiou“
Wenn (Vokale.beinhaltet(Wort[0].toLowerCase())) {
zurückkehren Wort;
 } anders {
zurückkehren;
 }
}
lassen Wörter = [ "Hallo", "aus", "Die", "Kinder", "von", "Planet", "Erde" ];
lassen Ergebnis = Wörter.filter((X) => checkFirstLetter (x))

Der obige Codeblock durchläuft die Wörter Array und filtert jedes Wort, dessen erster Buchstabe ein Vokal ist. Wenn Sie den Code ausführen und protokollieren Ergebnis Variable sollten Sie folgende Ergebnisse erhalten:

[ 'von', 'Erde' ];

Die Funktion Array.reduce() in JavaScript

Der reduzieren() Eine Funktion höherer Ordnung nimmt zwei Parameter an. Der erste Parameter ist die Reduktionsfunktion. Diese Reduktionsfunktion ist dafür verantwortlich, zwei Werte zu kombinieren und diesen Wert zurückzugeben. Der zweite Parameter ist optional.

Es definiert den Anfangswert, der an die Funktion übergeben werden soll. Wenn Sie eine Summe aller Elemente in einem Array zurückgeben möchten, können Sie Folgendes tun:

lassen a = [ 1, 2, 3, 4, 5];
lassen Summe = 0;
für (lassen ich = 0; i < a.length; i++) {
 Summe = Summe + a[i];
}
Konsole.log (Summe);

Wenn Sie den Code ausführen, Summe sollte 15 sein. Sie können mit dem auch einen anderen Ansatz wählen reduzieren Funktion.

lassen a = [ 1, 2, 3, 4, 5 ];
sum = a.reduce((c, n) => c + n);
Konsole.log (Summe);

Der obige Codeblock ist im Vergleich zum früheren Beispiel viel sauberer. In diesem Beispiel nimmt die Reduktionsfunktion zwei Parameter an: C Und N. C bezieht sich auf das aktuelle Element while N bezieht sich auf das nächste Element im Array.

Wenn der Code ausgeführt wird, durchläuft die Reduzierfunktion das Array und stellt sicher, dass der aktuelle Wert zum Ergebnis aus dem vorherigen Schritt hinzugefügt wird.

Die Macht von Funktionen höherer Ordnung

Funktionen in JavaScript sind leistungsstark, aber Funktionen höherer Ordnung bringen die Dinge auf die nächste Ebene. Sie werden häufig in der funktionalen Programmierung verwendet und ermöglichen das einfache Filtern, Reduzieren und Zuordnen von Arrays.

Funktionen höherer Ordnung können Ihnen dabei helfen, beim Erstellen von Anwendungen modulareren und wiederverwendbareren Code zu schreiben.