Detaillierte Erläuterung der Funktionskombination und des Curryings in JavaScript (mit Beispielen)

Dieser Artikel bietet Ihnen eine detaillierte Erklärung der JavaScript-Funktionskombination und des Curryings (mit Beispielen). Ich hoffe, dass er Ihnen als Referenz dienen wird.

Wir alle kennen das Single-Responsibility-Prinzip, nämlich S (SRP, Single-Responsibility-Prinzip) im objektorientierten SOLID. Bei der funktionalen Programmierung ist jede Funktion eine Einheit und sollte nur eine Aufgabe erfüllen. Aber die reale Welt ist immer komplex, und wenn man die reale Welt auf die Programmierung abbildet, macht eine einzelne Funktion wenig Sinn. Zu diesem Zeitpunkt sind Funktionskomposition und Curry erforderlich.

Verkettete Aufrufe

Wenn Sie jQuery verwendet haben, wissen Sie alle, was verkettete Aufrufe sind. Beispielsweise können $('.post').eq(1).attr('data-test', 'test') einige der nativen String- und Array-Methoden auch verkettete Aufrufe schreiben . Stil:

'Hello, world!'.split('').reverse().join('') // "!dlrow ,olleH"

Zunächst einmal basiert der Kettenaufruf auf Objekten split, reverse, join, die nicht vom vorherigen Objekt getrennt werden können. Welt!" Steh auf.

In der funktionalen Programmierung sind Methoden unabhängig von Daten. Wir können das Obige auf funktionale Weise schreiben:

const split = (tag, xs) => xs.split(tag)
const reverse = xs => xs.reverse()
const join = (tag, xs) => xs.join(tag)

join('',reverse(split('','Hello, world!'))) // "!dlrow ,olleH"

Sie werden definitiv sagen, Sie machen Witze. Wie ist das besser als verkettete Anrufe? Dies hängt immer noch von Daten ab. Ohne die Übergabe von „Hallo Welt!“ wird Ihre Reihe von Funktionskombinationen nicht funktionieren. Der einzige Vorteil besteht darin, dass die einzelnen Methoden wiederverwendet werden können. Keine Panik, es gibt später so viel Inhalt und ich werde ihn (dummerweise) für Sie optimieren. Bevor wir mit der Transformation fortfahren, stellen wir zunächst zwei Konzepte vor: Teilanwendung und Curry.

Teilanwendung

Teilanwendung ist ein Prozess, der Funktionsparameter verarbeitet. Er empfängt einige Parameter und gibt dann eine Funktion zurück, die weniger Parameter empfängt. Dies ist Teil der Bewerbung. Wir verwenden bind, um es zu implementieren:

const addThreeArg = (x, y, z) => x + y + z;

const addTwoArg = addThreeNumber.bind(null, 1)
const addOneArg = addThreeNumber.bind(null, 1, 2)

addTwoArg(2, 3) // 6
addOneArg(7) // 10

Das Obige verwendet bind, um zwei weitere Funktionen zu generieren, die jeweils die verbleibenden Parameter akzeptieren. Dies ist Teil der Anwendung. Natürlich können Sie es auch auf andere Weise tun.

Probleme mit einigen Anwendungen

Das Hauptproblem bei einigen Anwendungen besteht darin, dass der Typ der zurückgegebenen Funktion nicht direkt abgeleitet werden kann. Wie bereits erwähnt, geben einige Anwendungen eine Funktion zurück, die weniger Parameter akzeptiert, ohne anzugeben, wie viele Parameter zurückgegeben werden. Das ist etwas Implizites, Sie müssen sich den Code ansehen. Erst dann wissen Sie, wie viele Parameter die zurückgegebene Funktion erhält.

Curried

Curried-Definition: Sie können eine Funktion aufrufen, ohne ihr alle Parameter auf einmal zu übergeben. Diese Funktion gibt eine Funktion zurück, um die nächsten - und -Parameter zu empfangen.

const add = x => y => x + y
const plusOne = add(1)
plusOne(10) // 11

Eine Curry-Funktion gibt eine Funktion zurück, die nur einen Parameter akzeptiert und deren zurückgegebener Funktionstyp vorhersehbar ist.

Natürlich gibt es in der tatsächlichen Entwicklung viele Funktionen, die nicht mit Curry versehen sind. Wir können einige Toolfunktionen zum Konvertieren verwenden:

const curry = (fn) => { // fn可以是任何参数的函数
  const arity = fn.length;

  return function $curry(...args) {
    if (args.length <p> Sie können auch die in der Open-Source-Bibliothek bereitgestellte Curry-Methode verwenden Ramda. </p><h3 id="Oh-Curry-Was-ist-der-Nutzen">Oh, Curry. Was ist der Nutzen? </h3><p>Zum Beispiel</p><pre class="brush:php;toolbar:false">const currySplit = curry((tag, xs) => xs.split(tag))
const split = (tag, xs) => xs.split(tag)

// 我现在需要一个函数去split ","

const splitComma = currySplit(',') //by curry

const splitComma = string => split(',', string)

Sie können sehen, dass es nichts mit den Daten zu tun hat, wenn eine Curry-Funktion eine neue Funktion generiert. Vergleicht man die beiden Prozesse zur Generierung neuer Funktionen, ist der Prozess ohne Curry relativ ausführlich.

Funktionskomposition

Geben Sie zunächst den Code ein:

const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null, ...res)], args)[0];

Tatsächlich führt compose insgesamt zwei Dinge aus:

1. Empfangen eine Reihe von Funktionen, gibt eine Funktion zurück, führt die Funktionskombinationsfunktion

2. nicht sofort aus und kombiniert die an ihn übergebenen Funktionen von links nach rechts.

Einige Schüler sind möglicherweise nicht sehr vertraut mit dem oben genannten ReduceRight. Lassen Sie mich ein Beispiel für 2 Yuan und 3 Yuan geben:

const compose = (f, g) => (...args) => f(g(...args))
const compose3 = (f, g, z) => (...args) => f(g(z(...args)))

Funktionsaufrufe erfolgen von links nach rechts, Daten Der Fluss ist auch von links nach rechts derselbe. Natürlich können Sie von rechts nach links definieren, aber das ist semantisch nicht so aussagekräftig.

Okay, jetzt optimieren wir das erste Beispiel:

const split = curry((tag, xs) => xs.split(tag))
const reverse = xs => xs.reverse()
const join = curry((tag, xs) => xs.join(tag))

const reverseWords = compose(join(''), reverse, split(''))

reverseWords('Hello,world!');

Ist es viel einfacher und leichter zu verstehen? Das reverseWords hier ist auch der Pointfree-Codestil, über den wir zuvor gesprochen haben. Es ist nicht auf Daten oder externen Zustand angewiesen, sondern ist eine miteinander kombinierte Funktion.

Pointfree Ich habe das Konzept der funktionalen JS-Programmierung im vorherigen Artikel vorgestellt und auch seine Vor- und Nachteile erläutert. Interessierte Freunde können einen Blick darauf werfen.

Assoziatives Gesetz der Funktionskombination

Überprüfen Sie zunächst das Grundschulwissen über das assoziative Gesetz der Addition: a+(b+c)=(a+b)+c. Ich werde es nicht erklären, Sie sollten es verstehen können.

Rückblickend haben Funktionskombinationen tatsächlich assoziative Gesetze:

compose(f, compose(g, h)) === compose(compose(f, g), h);

Das ist ein Vorteil für unsere Programmierung. Unsere Funktionskombinationen können nach Belieben kombiniert und zwischengespeichert werden:

const split = curry((tag, xs) => xs.split(tag))
const reverse = xs => xs.reverse()
const join = curry((tag, xs) => xs.join(tag))

const getReverseArray = compose(reverse, split(''))

const reverseWords = compose(join(''), getReverseArray)

reverseWords('Hello,world!');

Gehirn Kartenergänzung:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktionskombination und des Curryings in JavaScript (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!