Funktionen höherer Ordnung in JavaScript verstehen

Erfahren Sie, wie flexibel JavaScript-Funktionen sein können und wie Sie damit flexiblen, wiederverwendbaren Code erstellen können.

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.

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 im Paradigma der funktionalen Programmierung häufig verwendet. Wenn Sie gerade erst mit JavaScript beginnen, sind Funktionen höherer Ordnung möglicherweise etwas schwer zu verstehen.

Betrachten Sie das folgende Beispiel:

Im Codeblock oben ist dieverwandelnFunktion ist eine Funktion höherer Ordnung, die die übernimmtfnFunktion als Parameter und gibt eine anonyme Funktion zurück, die aufnimmtArrayals Parameter.

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

DerverwandelnDie Funktion gibt eine anonyme Funktion zurück, die jedes Element in durchläuftArray, übergibt dann das Element an diefnFunktion zur Berechnung und schiebt das Ergebnis hineinresultArray . Nach Abschluss der Schleife gibt die anonyme Funktion die zurückresultArray.

Der obige Codeblock weist die von zurückgegebene anonyme Funktion zuverwandelnFunktion zur konstanten VariablenFunktion1.fngibt das Produkt von zurückXwas ein Ersatz für istArray[i].

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

JavaScript verfügt über eine integrierte Funktion höherer Ordnung, die im Grunde das Gleiche tut wieverwandeln, 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.

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 umverwandeln() Funktion. Um diese Funktion zu nutzen, gehen Sie etwa so vor:

im Gegensatz zu denverwandelnFunktion, DiefilterAndTransformDie Funktion benötigt zwei Funktionen als Parameter:fnUndZustand . DerZustand Die Funktion prüft, ob der übergebene Parameter eine gerade Zahl ist, und gibt true zurück. Andernfalls wird false zurückgegeben.

WennZustandwird zu „true“ aufgelöst (die Bedingung ist erfüllt), erst dann ist dieverwandeln 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:

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.

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

Wenn Sie sich anmeldentransformiertesArrayIn der Browserkonsole sollten Sie das gleiche Ergebnis erhalten wie mitverwandelnFunktion bereits erwähnt:

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 mitarray.map()Sie können die gleichen Ergebnisse erzielen wie mitfilterAndTransform Funktion. So machen Sie es:

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 eingebautenKarteMit 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.

Wenn Sie die aufrufenFilter 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. DerFilter Die Methode gibt ein Array zurück, das Elemente enthält, die die übergebene Bedingung erfüllen. Hier erfahren Sie, wie Sie es verwenden.

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

Derreduzieren() 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:

Wenn Sie den Code ausführen,Summesollte 15 sein. Sie können mit dem auch einen anderen Ansatz wählenreduzierenFunktion.

Der obige Codeblock ist im Vergleich zum früheren Beispiel viel sauberer. In diesem Beispiel nimmt die Reduktionsfunktion zwei Parameter an:CUndN.Cbezieht sich auf das aktuelle Element whileNbezieht 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.

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.

David Uzondu ist ein JavaScript-Entwickler mit mehr als 3 Jahren Erfahrung. In seiner Freizeit schreibt er gern.