Wenn Sie JavaScript lernen, müssen Sie auf das Konzept einer „Funktion höherer Ordnung“ gestoßen sein. Dies mag wie etwas sehr Kompliziertes erscheinen, ist es aber nicht.
JavaScript eignet sich für die funktionale Programmierung, da es das Konzept von Funktionen höherer Ordnung unterstützt. Solche Funktionen sind in der Sprache weit verbreitet, und wenn Sie in JS programmiert haben, haben Sie wahrscheinlich bereits mit ihnen gearbeitet, ohne es zu wissen.
Um dieses Konzept vollständig zu verstehen, müssen Sie zunächst das Konzept der funktionalen Programmierung (Functional Programming) und die erstklassigen Funktionen (First-Class-Funktionen) verstehen.
Das Material, dessen Übersetzung wir veröffentlichen, richtet sich an Anfänger. Es soll das Konzept von Funktionen höherer Ordnung erläutern und deren Verwendung in JavaScript demonstrieren.
Was ist funktionale Programmierung?
Wenn Sie das Konzept der funktionalen Programmierung in einfachen Worten beschreiben, stellt sich heraus, dass dies ein Programmieransatz ist, mit dem Sie Funktionen als Parameter auf andere Funktionen übertragen und Funktionen als von anderen Funktionen zurückgegebene Werte verwenden können. Wir beschäftigen uns mit funktionaler Programmierung, entwerfen die Architektur der Anwendung und schreiben Code mithilfe von Funktionen.
Zu den Sprachen, die die funktionale Programmierung unterstützen, gehören JavaScript, Haskell, Clojure, Scala und Erlang.
Erstklassige Funktionen
Wenn Sie JavaScript lernen, hören Sie möglicherweise, dass Funktionen in einer Sprache als erstklassige Objekte behandelt werden. Dies liegt daran, dass in JavaScript wie in anderen Sprachen, die die funktionale Programmierung unterstützen, Funktionen Objekte sind.
Insbesondere in JS werden Funktionen als Objekte eines bestimmten Typs dargestellt - dies sind Objekte vom Typ
Function . Betrachten Sie ein Beispiel:
function greeting() { console.log('Hello World'); } // greeting(); // 'Hello World'
Um zu beweisen, dass Funktionen in JavaScript Objekte sind, können wir Folgendes tun und das vorherige Beispiel fortsetzen:
// , greeting.lang = 'English'; // 'English' console.log(greeting.lang);
Beachten Sie, dass das Hinzufügen eigener Eigenschaften zu Standardobjekten in JavaScript zwar keine Fehlermeldungen verursacht, dies jedoch nicht empfohlen wird. Sie sollten Funktionen keine eigenen Eigenschaften hinzufügen. Wenn Sie etwas in einem Objekt speichern müssen, ist es besser, ein spezielles Objekt dafür zu erstellen.
In JavaScript mit Funktionen können Sie dasselbe tun wie mit Entitäten anderer Typen, wie z. B.
Object ,
String ,
Number . Funktionen können als Parameter an andere Funktionen übergeben werden. Solche Funktionen, die auf andere übertragen werden, fungieren normalerweise als Rückruffunktionen (Rückrufe). Funktionen können Variablen zugewiesen, in Arrays usw. gespeichert werden. Deshalb sind Funktionen in JS erstklassige Objekte.
Zuweisen von Funktionen zu Variablen und Konstanten
Variablen und Konstanten können Funktionen zugewiesen werden:
const square = function(x) { return x * x; }
Funktionen, die Variablen oder Konstanten zugewiesen sind, können anderen Variablen oder Konstanten zugewiesen werden:
const foo = square;
Übergabe von Funktionen als Parameter
Funktionen können als Parameter für andere Funktionen übergeben werden:
function formalGreeting() { console.log("How are you?"); } function casualGreeting() { console.log("What's up?"); } function greet(type, greetFormal, greetCasual) { if(type === 'formal') { greetFormal(); } else if(type === 'casual') { greetCasual(); } } // 'What's up?' greet('casual', formalGreeting, casualGreeting);
Nachdem wir nun wissen, wie sich erstklassige Funktionen verhalten, sprechen wir über Funktionen höherer Ordnung.
Funktionen höherer Ordnung
Funktionen höherer Ordnung sind Funktionen, die mit anderen Funktionen zusammenarbeiten und diese entweder als Parameter verwenden oder zurückgeben. Einfach ausgedrückt ist eine Funktion höherer Ordnung eine Funktion, die eine Funktion als Argument verwendet oder eine Funktion als Ausgabewert zurückgibt.
Beispielsweise sind die integrierten JavaScript-Funktionen
Array.prototype.map ,
Array.prototype.filter und
Array.prototype.reduce Funktionen höherer Ordnung.
Funktionen höherer Ordnung in Aktion
Betrachten Sie Beispiele für die Verwendung von in JS integrierten Funktionen höherer Ordnung und vergleichen Sie diesen Ansatz mit ähnlichen Aktionen, ohne solche Funktionen zu verwenden.
▍ Methode Array.prototype.map
Die
map() -Methode erstellt ein neues Array und ruft zur Verarbeitung jedes Elements des Eingabearrays den als Argument übergebenen Rückruf auf. Diese Methode verwendet jeden vom Rückruf zurückgegebenen Wert und platziert ihn im Ausgabearray.
Die an
map() Rückruffunktion akzeptiert drei Argumente:
element (element),
index (index) und
array (array). Schauen wir uns einige Beispiele an.
Beispiel Nr. 1
Angenommen, wir haben ein Array von Zahlen und möchten ein neues Array erstellen, das die Ergebnisse der Multiplikation dieser Zahlen mit 2 enthält. Überlegen Sie, wie Sie dieses Problem mit Funktionen höherer Ordnung und ohne diese lösen können.
Lösen eines Problems ohne Verwendung von Funktionen höherer Ordnung
const arr1 = [1, 2, 3]; const arr2 = []; for(let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2); } // [ 2, 4, 6 ] console.log(arr2);
Lösen eines Problems mithilfe einer Funktionszuordnung höherer Ordnung
const arr1 = [1, 2, 3]; const arr2 = arr1.map(function(item) { return item * 2; }); console.log(arr2);
Sie können die Lautstärke dieses Codes sogar reduzieren, wenn Sie die Pfeilfunktion verwenden:
const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); console.log(arr2);
Beispiel Nr. 2
Angenommen, wir haben ein Array, das das Geburtsjahr einiger Menschen enthält, und wir müssen ein Array erstellen, das 2018 ihr Alter erreicht. Betrachten Sie nach wie vor die Lösung dieses Problems auf zwei Arten.
Lösen eines Problems ohne Verwendung von Funktionen höherer Ordnung
const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = []; for(let i = 0; i < birthYear.length; i++) { let age = 2018 - birthYear[i]; ages.push(age); }
Lösen eines Problems mithilfe einer Funktionszuordnung höherer Ordnung
const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = birthYear.map(year => 2018 - year);
▍ Methode Array.prototype.filter
Die
filter() -Methode erstellt auf der Grundlage des Arrays ein neues Array, in das die Elemente des ursprünglichen Arrays fallen, entsprechend der Bedingung, die in der an diese Methode übergebenen Rückruffunktion angegeben ist. Diese Funktion benötigt wie bei der
map() -Methode drei Argumente:
element ,
index und
array .
Stellen Sie sich ein Beispiel vor, das auf die gleiche Weise wie bei der
map() -Methode erstellt wurde.
Beispiel
Angenommen, wir haben ein Array mit Objekten, deren Eigenschaften Informationen über den Namen und das Alter von Vertretern einer bestimmten Personengruppe speichern. Wir müssen ein Array erstellen, in dem nur Informationen über die erwachsenen Vertreter dieser Gruppe (diejenigen, deren Alter 18 Jahre erreicht hat) vorliegen.
Lösen eines Problems ohne Verwendung von Funktionen höherer Ordnung
const persons = [ { name: 'Peter', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24}, ]; const fullAge = []; for(let i = 0; i < persons.length; i++) { if(persons[i].age >= 18) { fullAge.push(persons[i]); } } console.log(fullAge);
Lösen eines Problems mit einem Funktionsfilter höherer Ordnung
const persons = [ { name: 'Peter', age: 16 }, { name: 'Mark', age: 18 }, { name: 'John', age: 27 }, { name: 'Jane', age: 14 }, { name: 'Tony', age: 24}, ]; const fullAge = persons.filter(person => person.age >= 18); console.log(fullAge);
▍ Methode Array.prototype.reduce
Die Methode
reduce() verarbeitet jedes Element des Arrays mithilfe eines Rückrufs und fügt das Ergebnis in einen einzelnen Ausgabewert ein. Diese Methode verwendet zwei Parameter: Rückruf und optionaler Anfangswert (
initialValue ).
Ein Rückruf akzeptiert vier Parameter:
accumulator (Akkumulator),
currentValue (aktueller Wert),
currentIndex (aktueller Index),
sourceArray (
sourceArray ).
Wenn der
initialValue Parameter
initialValue zur Verfügung gestellt wird, entspricht der
accumulator zu Beginn der Methode diesem Wert, und das erste Element des verarbeiteten Arrays wird in
currentValue .
Wenn der Parameter
initialValue nicht für die Methode bereitgestellt wird, wird das erste Element des Arrays in den
accumulator und das zweite in
currentValue .
Beispiel
Angenommen, wir haben eine Reihe von Zahlen. Wir müssen die Summe seiner Elemente berechnen.
Lösen eines Problems ohne Verwendung von Funktionen höherer Ordnung
const arr = [5, 7, 1, 8, 4]; let sum = 0; for(let i = 0; i < arr.length; i++) { sum = sum + arr[i]; }
Lösen eines Problems mit einer Funktion höherer Ordnung reduzieren
Ziehen Sie zunächst die Methode
reduce() Betracht, ohne einen Anfangswert anzugeben.
const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; });
Jedes Mal, wenn ein Rückruf mit einem an
currentValue übergebenen
currentValue dem nächsten Element des Arrays, aufgerufen wird, enthält sein
accumulator die Ergebnisse der vorherigen Operation,
currentValue das, was bei der vorherigen Iteration von der Funktion zurückgegeben wurde. Nach Abschluss dieser Methode fällt das Endergebnis in die konstante
sum .
Schauen wir uns nun an, wie die Lösung des Problems aussehen wird, wenn wir den Anfangswert an die Methode
reduce() .
const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 10);
Wie Sie sehen können, hat die Verwendung einer Funktion höherer Ordnung unseren Code sauberer, prägnanter und leichter lesbar gemacht.
Erstellen Sie benutzerdefinierte Funktionen höherer Ordnung
Bisher haben wir mit Funktionen höherer Ordnung gearbeitet, die in JS integriert sind. Erstellen wir nun unsere eigene Funktion, die mit anderen Funktionen zusammenarbeitet.
Stellen Sie sich vor, JavaScript verfügt nicht über eine Standard-Array-Methode
map() . Wir können eine solche Methode selbst erstellen, die sich in der Entwicklung einer Funktion höherer Ordnung äußert.
Angenommen, wir haben ein Array von Zeichenfolgen, und wir möchten auf dieser Basis ein Array mit Zahlen erstellen, von denen jede die Länge der Zeichenfolge darstellt, die in einem Element des ursprünglichen Arrays gespeichert ist.
const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C']; function mapForEach(arr, fn) { const newArray = []; for(let i = 0; i < arr.length; i++) { newArray.push( fn(arr[i]) ); } return newArray; } const lenArray = mapForEach(strArray, function(item) { return item.length; });
In diesem Beispiel haben wir eine Funktion
mapForEach höherer Ordnung
mapForEach , die ein Array und eine
fn Rückruffunktion verwendet. Die
mapForEach Funktion
mapForEach Array in einer Schleife und ruft bei jeder Iteration dieser Schleife den
fn Rückruf auf.
Der
fn Rückruf akzeptiert das aktuelle Zeichenfolgenelement des Arrays und gibt die Länge dieses Elements zurück. Was die Funktion
fn zurückgibt, wird im Befehl
newArray.push() und
mapForEach() in das Array, das
mapForEach() . Dieses Array wird schließlich in die
lenArray Konstante geschrieben.
Zusammenfassung
In diesem Artikel haben wir über Funktionen höherer Ordnung gesprochen und einige der integrierten JavaScript-Funktionen untersucht. Außerdem haben wir herausgefunden, wie Sie Ihre eigenen Funktionen höherer Ordnung erstellen können.
Kurz gesagt, die Essenz von Funktionen höherer Ordnung kann als Funktionen bezeichnet werden, die andere Funktionen als Argumente verwenden und andere Funktionen als Ergebnis ihrer Arbeit zurückgeben können. Das Arbeiten mit anderen Funktionen in Funktionen höherer Ordnung sieht genauso aus wie das Arbeiten mit anderen Objekten.
Liebe Leser! Müssen Sie Ihre eigenen Funktionen höherer Ordnung schreiben?
