Juxtapose-Funktionen 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 Juxtapose-Funktionen in JavaScript erkunden. Wir werden lernen, wie man eine Funktion erstellt, die mehrere Funktionen als Argumente nimmt und eine neue Funktion zurückgibt, die diese Funktionen auf die gleiche Argumentmenge anwendet und ein Array der Ergebnisse zurückgibt. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie Sie Juxtapose-Funktionen verwenden, um Ihren Code zu vereinfachen und effizienter zu gestalten.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic 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-28459{{"Juxtapose-Funktionen in JavaScript"}} javascript/data_types -.-> lab-28459{{"Juxtapose-Funktionen in JavaScript"}} javascript/arith_ops -.-> lab-28459{{"Juxtapose-Funktionen in JavaScript"}} javascript/comp_ops -.-> lab-28459{{"Juxtapose-Funktionen in JavaScript"}} javascript/higher_funcs -.-> lab-28459{{"Juxtapose-Funktionen in JavaScript"}} javascript/spread_rest -.-> lab-28459{{"Juxtapose-Funktionen in JavaScript"}} end

Erklärung von Juxtapose-Funktionen

Um die juxt-Funktion zu verwenden, öffnen Sie zunächst das Terminal/SSH und geben Sie node ein, um mit der Codeausführung zu beginnen. Die juxt-Funktion nimmt mehrere Funktionen als Argumente entgegen und gibt eine Funktion zurück, die die Verkettung dieser Funktionen darstellt.

Um die juxt-Funktion zu erstellen, verwenden Sie Array.prototype.map(), um eine fn zurückzugeben, die eine variable Anzahl von args akzeptieren kann. Wenn fn aufgerufen wird, sollte sie ein Array zurückgeben, das das Ergebnis enthält, wenn jede fn auf die args angewendet wird.

Hier ist eine Beispielimplementierung der juxt-Funktion:

const juxt =
  (...fns) =>
  (...args) =>
    [...fns].map((fn) => [...args].map(fn));

Sobald Sie die juxt-Funktion definiert haben, können Sie sie verwenden, indem Sie beliebig viele Funktionen als Argumente übergeben, gefolgt von beliebig vielen Argumenten, die an diese Funktionen übergeben werden sollen.

Hier sind ein paar Beispiele für die Verwendung der juxt-Funktion:

juxt(
  (x) => x + 1,
  (x) => x - 1,
  (x) => x * 10
)(1, 2, 3); // [[2, 3, 4], [0, 1, 2], [10, 20, 30]]
juxt(
  (s) => s.length,
  (s) => s.split(" ").join("-")
)("happy coding"); // [[18], ['happy-coding']]

Im ersten Beispiel nimmt die juxt-Funktion drei Funktionen als Argumente entgegen und gibt eine neue Funktion zurück. Wenn diese neue Funktion mit den Argumenten 1, 2, 3 aufgerufen wird, wendet sie jede der drei Funktionen auf diese Argumente an und gibt ein Array von Arrays zurück, die die Ergebnisse enthalten.

Im zweiten Beispiel nimmt die juxt-Funktion zwei Funktionen als Argumente entgegen und gibt eine neue Funktion zurück. Wenn diese neue Funktion mit dem Argument 'happy-coding' aufgerufen wird, wendet sie jede der beiden Funktionen auf dieses Argument an und gibt ein Array von Arrays zurück, die die Ergebnisse enthalten.

Zusammenfassung

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