So schreiben Sie Ihre eigene Pipe-Funktion in JS

Javascript ist so dynamisch, dass wir viele Möglichkeiten wählen können, um unseren Code zu schreiben. Warum nicht die Funktionale Programmierung?

Was ist Funktionsverrohrung?

Erinnerst du dich an der High School, in der Matheklasse, dass du zwei Funktionen hattest -
f (x) und g (x).
Und dann könnten Sie eine neue Funktion erstellen:
h (x) = f (g (x)).

Die neue Funktion würde ein Argument akzeptieren und dieses Argument an die nächste Funktion übergeben = f (g).

Funktions-Piping ist also die gleiche Grundidee. Sie erstellen eine neue Funktion, die mehrere kleinere Funktionen „durchläuft“.

Schreiben pur

In der funktionalen Welt schreiben wir gerne reine Funktionen.

Eine Funktion als rein betrachten, wenn:
1. Es erhält alle Parameter, die es benötigt (verwendet keine globalen Variablen oder Klassenmitglieder)
2. Geben Sie für eine bestimmte Eingabe immer dieselbe Ausgabe zurück
3. Keine Nebenwirkung (Serveraufruf, Datenbankabruf, DOM-Rendering usw.)

Die reinen Funktionen haben viele Vorteile:
1. Es ist testbar! Nie mehr Setup oder Mock Class schreiben
2. Es ist cachefähig. Diese Funktionen sind deterministisch. Warum die gleiche Eingabe mehrmals berechnen?
Es gibt ein cooles Muster mit dem Namen memoize. Bitte probieren Sie es aus.

Und der Vorteil, für den wir hier sind, ist:
3. Es ist komponierbar! Sie können beliebig viele Funktionen weiterleiten, um eine komplexere Funktion (oder sogar ein gesamtes Feature) zu erstellen.

Die Reduktionsfunktion

Da wir die Pipe-Funktion auf der Grundlage von "Array.reduce ()" erstellen, werde ich sie kurz erläutern.

reduct () nimmt die Elemente im Array, verarbeitet sie und gibt ein Element zurück. Dieses eine Element kann ein beliebiges Element sein, auch eine Funktion, wie wir im nächsten Abschnitt sehen werden.

// Summenfunktion, ruft ein Array ab und gibt die Summe zurück
// es5 style, mabye es ist klarer
Funktion sum_es5 (arr) {
   arr.reduce (Funktion (acc, curr) {
      return acc + curr
   }, 0
}
// Die gleiche Funktion wie in es6
const sum = arr =>
  arr.reduce ((acc, curr) => acc + curr, 0)
const mul = arr =>
  arr.reduce ((acc, curr) => acc * curr, 1)
sum ([1,2,3]) // 6
mul ([2,3,4]) // 24

Lassen Sie es uns aufschlüsseln.
Die Reduzierungsfunktion erhält zwei Argumente:

Zuerst
Eine Funktion, diese Funktion selbst erhält zwei Argumente, einen Akkumulator und den aktuellen Wert. Der erste Wert enthält den aggregierten Wert, den wir bisher berechnet haben. Das zweite ist das aktuelle Element in unserem Array.

Zweite
Der Anfangswert. Der Akku wird mit diesem Wert initialisiert.

Jetzt ist es einfach, unsere Summenfunktion zu verstehen.
Der Anfangswert ist natürlich 0, und bei jeder Iteration geben wir die Summe des bisherigen aggregierten Werts und des aktuellen Array-Elements zurück.

Erstellen Sie die Pipe-Funktion

Umgang mit mehr als einem Argument

Wie wir in unserer Pipe-Funktion gesehen haben, können wir gut mit mehreren Argumenten umgehen, die an unsere erste Funktion übergeben wurden.

Was ist mit der Funktion mit mehreren Argumenten, die nicht die erste Funktion ist?
In der funktionalen Welt gibt es ein schönes Designmuster namens Curry, das uns hilft, dieses Problem zu lösen. Ich werde es in einem anderen Artikel behandeln.