Funktionen höherer Ordnung in JavaScript: Was ist das?

Wir präsentieren Ihnen eine Übersetzung eines Artikels von Sukhjinder Arora, der auf Bits and Pieces veröffentlicht wurde . Informieren Sie sich unter der Katze über Funktionen höherer Ordnung in JavaScript und einige andere Funktionen, die in diese Sprache integriert sind.


Foto von NESA von Makers von Unsplash

Beim Erlernen der JavaScript-Programmierung sind Sie wahrscheinlich auf das Konzept von Funktionen höherer Ordnung gestoßen . Obwohl dieses Konzept einschüchternd wirkt, ist es eigentlich nicht so kompliziert.

Dank der Fähigkeit, mit Funktionen höherer Ordnung zu arbeiten, eignet sich JavaScript für die funktionale Programmierung.

Funktionen höherer Ordnung sind in JavaScript üblich. Wenn Sie eine Weile mit ihm zusammengearbeitet haben, ist es sehr wahrscheinlich, dass Sie solche Funktionen verwendet haben, ohne es zu merken.

Um ein vollständiges Bild von Funktionen höherer Ordnung zu erhalten, müssen Sie zunächst verstehen, was funktionale Programmierung und erstklassige Funktionen sind .

Tipp : Die Wiederverwendung von JavaScript-Funktionen führt häufig zu Duplikaten. Um dies zu vermeiden, verwenden Sie Bit (GitHub) . Sie können neue Funktionen leicht finden, freigeben und mit minimalen Verwaltungsänderungen erneut anwenden. Probieren Sie es aus, seien Sie nicht schüchtern.

Was ist funktionale Programmierung?

Ohne auf Details einzugehen, ist funktionale Programmierung eine Programmierung, bei der einige Funktionen als Argumente an andere Funktionen übergeben werden und dritte Funktionen als Werte zurückgegeben werden. In der funktionalen Programmierung denken und arbeiten wir mit Funktionen.

Die funktionale Programmierung erfolgt in Sprachen wie JavaScript, Haskell, Clojure, Scala und Erlang.

Was sind erstklassige Funktionen

Als Sie lernten, mit JavaScript zu arbeiten, haben Sie höchstwahrscheinlich gehört, dass Funktionen für ihn erstklassige Bürger sind. Tatsache ist, dass in JavaScript wie in jeder anderen funktionalen Programmiersprache Funktionen Objekte sind.

Speziell für JavaScript sind Funktionen Objekte einer besonderen Art ( Function oder Funktoren). Zum Beispiel:

 function greeting() { console.log('Hello World'); } // Invoking the function greeting(); // prints 'Hello World' 

Um zu zeigen, dass Funktionen in JavaScript Objekte sind, können wir Folgendes tun:

 // We can add properties to functions like we do with objects greeting.lang = 'English'; // Prints 'English' console.log(greeting.lang); 

Hinweis: Obwohl das oben Genannte in JavaScript gut funktioniert, sollten Sie es nicht missbrauchen. Sie können Funktoren keine zufälligen Eigenschaften zuweisen. Es ist besser, normale Objekte zu verwenden.

In JavaScript gilt alles, was Sie mit anderen Entitäten wie einem Objekt, einer Zeichenfolge oder einer Zahl tun können, für Funktionen. Sie können übergeben werden, auch als Argumente an andere Funktionen (dann werden sie als Rückruffunktionen oder Rückruffunktionen bezeichnet), sie können Variablen zugewiesen werden und so weiter. Aus diesem Grund werden JavaScript-Funktionen als erstklassige Funktionen bezeichnet.

Variablen Funktionen zuweisen

Mit JavaScript können Sie Variablen Funktionen zuweisen. Zum Beispiel:

 const square = function(x) { return x * x; } // prints 25 square(5); 

Sie können auch übertragen werden. Zum Beispiel:

 const foo = square; // prints 36 foo(6); 

Übergeben von Funktionen als Argumente

Wir können Funktionen als Argumente an andere Funktionen übergeben. Zum Beispiel:

 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(); } } // prints 'What's up?' greet('casual', formalGreeting, casualGreeting); 

Nachdem wir nun wissen, was erstklassige Funktionen sind, wenden wir uns Funktionen höherer Ordnung in JavaScript zu.

Funktionen höherer Ordnung

Funktionen höherer Ordnung sind Funktionen, die mit anderen Funktionen arbeiten, eine Funktion als Argument verwenden oder als Ergebnis eine Funktion zurückgeben.

Beispiele für Funktionen höherer Ordnung, die bereits in die Sprache integriert sind, sind Array.prototype.map , Array.prototype.filter und Array.prototype.reduce .

Funktionen höherer Ordnung in Aktion

Schauen wir uns einige Beispiele für integrierte Funktionen höherer Ordnung an und vergleichen sie mit Lösungen, bei denen Funktionen höherer Ordnung nicht verwendet werden.

Array.prototype.map
Die map() -Methode erstellt ein neues Array mit dem Ergebnis des Aufrufs der übergebenen Funktion für jedes Element des anfänglichen Arrays. Die map() -Methode verwendet jeden Wert der Rückruffunktion und erstellt mit diesen Werten ein neues Array.

Die an die map() -Methode übergebene Rückruffunktion akzeptiert drei Argumente: element , index und array .

Betrachten Sie dies anhand einiger Beispiele.

Beispiel Nr. 1
Angenommen, wir haben ein Array von Zahlen, und daraus möchten wir ein neues Array erstellen, in dem jede Zahl aus dem ursprünglichen Array verdoppelt wird. Wie können wir dieses Problem mit und ohne Funktion höherer Ordnung lösen?

Ohne Funktion höherer Ordnung:

 const arr1 = [1, 2, 3]; const arr2 = []; for(let i = 0; i < arr1.length; i++) { arr2.push(arr1[i] * 2); } // prints [ 2, 4, 6 ] console.log(arr2); 

Verwenden der map höherer Ordnung:

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(function(item) { return item * 2; }); console.log(arr2); 

Der Code kann mit der Pfeilfunktion noch kürzer gemacht werden.

 const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); console.log(arr2); 

Beispiel Nr. 2
Nehmen wir an, wir haben ein Array, das die Geburtsjahre mehrerer Personen enthält, und daraus möchten wir ein neues Array erstellen, in dem ihr Alter sein wird.

Ohne Funktion 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); } // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Verwenden der map höherer Ordnung:

 const birthYear = [1975, 1997, 2002, 1995, 1985]; const ages = birthYear.map(year => 2018 - year); // prints [ 43, 21, 16, 23, 33 ] console.log(ages); 

Array.prototype.filter
Die filter() -Methode erstellt ein neues Array mit allen Elementen, die den in der übergebenen Funktion angegebenen Test bestanden haben. Die an filter() Rückruffunktion akzeptiert drei Argumente: element , index und array .

Betrachten Sie dies anhand einiger Beispiele.

Beispiel Nr. 1
Stellen Sie sich vor, wir haben ein Array mit Objekten mit den Eigenschaften "Name" und "Alter". Daraus wollen wir ein neues Array erstellen, in dem nur Erwachsene (ab achtzehn Jahren) angezeigt werden.

Ohne Funktion 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); 

Verwenden der filter 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); 

Array.prototype.reduce
Die reduce wendet eine Funktion auf jeden Wert des Arrays an und reduziert sie auf einen einzelnen Wert. Die Reduktionsmethode akzeptiert zwei Argumente:

1. Rückruffunktion verarbeitet werden;
2. optionaler Parameter initialValue (erstes Argument beim ersten Funktionsaufruf).

Die Rückruffunktion currentValue vier Argumente: accumulator , currentValue , currentIndex , sourceArray .

Wenn der Parameter initialValue wurde, entspricht das accumulator Argument initialValue , und das Argument currentValue ist das erste Element des Arrays.

Wenn der Parameter initialValue nicht übergeben wurde, entspricht das accumulator dem ersten Element des Arrays, und das zweite Element des Arrays wird als currentValue .

Beispiel Nr. 1
Angenommen, wir müssen die Summe der Zahlen in einem Array finden.

Mit einer Funktion höherer Ordnung reduce :

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }); // prints 25 console.log(sum); 

Jedes Mal, wenn eine Rückruffunktion auf jeden Wert aus dem Array angewendet wird, speichert das accumulator das Ergebnis der vorherigen von der Funktion zurückgegebenen Aktion, und currentValue übernimmt den nächsten Wert des Arrays. Nach Abschluss wird das Ergebnis in der variablen sum gespeichert.

Zusätzlich können wir dieser Funktion den Anfangswert übergeben:

 const arr = [5, 7, 1, 8, 4]; const sum = arr.reduce(function(accumulator, currentValue) { return accumulator + currentValue; }, 10); // prints 35 console.log(sum); 

Ohne Funktion 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]; } // prints 25 console.log(sum); 

Wie Sie sehen können, kann der Code mithilfe einer Funktion höherer Ordnung übersichtlicher, kürzer und umfangreicher gestaltet werden.

Erstellen Sie Ihre eigene Funktion höherer Ordnung

Bis zu diesem Punkt haben wir verschiedene Funktionen höherer Ordnung betrachtet, die in die Sprache eingebaut sind. Es ist Zeit, eine eigene Funktion höherer Ordnung zu erstellen.

Stellen Sie sich vor, JavaScript hätte keine eigene map . Wir könnten es selbst bauen und dadurch unsere eigene Funktion höherer Ordnung schaffen.

Angenommen, wir haben ein Array von Zeichenfolgen, und daraus möchten wir ein Array von Integralen erstellen, in denen jedes Element die Länge der Zeichenfolge aus dem ursprünglichen Array darstellt.

 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; }); // prints [ 10, 6, 3, 4, 1 ] console.log(lenArray); 

Im obigen Beispiel haben wir eine Funktion mapForEach höherer Ordnung mapForEach , die ein Array und eine Rückruffunktion fn als Argumente verwendet. Diese Funktion wird zyklisch auf jedes Element des Arrays angewendet und ruft die Rückruffunktion fn als Teil des Funktionsaufrufs newArray.push in jeder Iteration auf.

Die Rückruffunktion fn verwendet das aktuelle Element des anfänglichen Arrays und gibt den newArray dieses Elements zurück, der im neuen newArray gespeichert ist. Nach Abschluss der Iteration wird das newArray Array als Ergebnis zurückgegeben und dem lenArray Array zugewiesen.

Fazit

Wir haben gelernt, was Funktionen höherer Ordnung sind, und einige der in die Sprache eingebauten Funktionen untersucht. Wir haben auch gelernt, wie Sie Ihre eigenen Funktionen höherer Ordnung erstellen.

Kurz gesagt, Funktionen höherer Ordnung funktionieren wie reguläre Funktionen, haben jedoch die zusätzliche Möglichkeit, andere Funktionen als Argument zu empfangen und als Ergebnis zurückzugeben.

Das ist in der Tat alles. Wenn Sie diesen Artikel hilfreich fanden, können Sie mir auch auf Medium und Twitter folgen. Fühlen Sie sich frei zu kommentieren, wenn Sie Fragen haben! Ich helfe Ihnen gerne weiter. :) :)