Efficiente Funktionskomposition in JavaScript

JavaScriptJavaScriptBeginner
Jetzt üben

This tutorial is from open-source community. Access the source code

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir das Konzept der Funktionskomposition in JavaScript erkunden. Wir werden lernen, wie mehrere Funktionen zu einer einzigen Funktion kombiniert werden können, die eine Reihe von Operationen in einer links-nach-rechts-Reihenfolge ausführt. Mit Hilfe der pipeFunctions-Funktion werden wir die Vorteile der Funktionskomposition entdecken und wie sie unseren Code vereinfachen und lesbarer machen kann.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") subgraph Lab Skills javascript/variables -.-> lab-28546{{"Efficiente Funktionskomposition in JavaScript"}} javascript/data_types -.-> lab-28546{{"Efficiente Funktionskomposition in JavaScript"}} javascript/arith_ops -.-> lab-28546{{"Efficiente Funktionskomposition in JavaScript"}} javascript/comp_ops -.-> lab-28546{{"Efficiente Funktionskomposition in JavaScript"}} javascript/higher_funcs -.-> lab-28546{{"Efficiente Funktionskomposition in JavaScript"}} javascript/spread_rest -.-> lab-28546{{"Efficiente Funktionskomposition in JavaScript"}} end

Funktionskomposition mit Pipelines

Um zu beginnen, mit Pipelines zu programmieren, öffnen Sie das Terminal/SSH und geben Sie node ein.

Die pipeFunctions-Funktion führt eine links-nach-rechts-Funktionskomposition durch, indem sie Array.prototype.reduce() mit dem Spread-Operator (...) verwendet. Die erste (am linken Ende) Funktion kann einen oder mehrere Argumente akzeptieren, während die verbleibenden Funktionen unär sein müssen.

const pipeFunctions = (...fns) =>
  fns.reduce(
    (f, g) =>
      (...args) =>
        g(f(...args))
  );

Hier ist ein Beispiel dafür, wie pipeFunctions verwendet werden kann, um eine neue Funktion multiplyAndAdd5 zu erstellen, die zwei Zahlen multipliziert und dann 5 zum Ergebnis addiert:

const add5 = (x) => x + 5;
const multiply = (x, y) => x * y;
const multiplyAndAdd5 = pipeFunctions(multiply, add5);
multiplyAndAdd5(5, 2); // 15

In diesem Beispiel ist multiplyAndAdd5 eine neue Funktion, die zwei Argumente, 5 und 2, annimmt und zuerst multiply auf sie anwendet, was 10 ergibt, und dann add5 auf das Ergebnis anwendet, was 15 ergibt.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zu Pipenfunktionen abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.