Funktionszusammensetzung in JavaScript mit Array.Prototype.ReDuceright

In den letzten Jahren wurde die funktionelle Programmierung in JavaScript immer beliebter. Während einige seiner häufig veröffentlichten Prinzipien (wie invarianz) Laufzeit-Problemumgehungen erfordern, beweist die erstklassige Verarbeitung von Funktionen durch die Sprache seine Unterstützung für einen komponierbaren Code, der von diesem grundlegenden Primitiv angetrieben wird. Bevor wir vorstellen, wie Funktionen aus anderen Funktionen dynamisch kombiniert werden können, lesen wir sie kurz.

Schlüsselpunkte

• Funktionskombinationen in JavaScript können komplexe Funktionen erstellen, indem einfachere Funktionen kombiniert werden, wodurch die Wiederverwendbarkeit und Modularität des Codes verbessert wird. Dieser Ansatz vereinfacht das Verständnis, das Debuggen und das Testen von Code und fördert das Prinzip "Nicht wiederholen" (trocken) und reduziert die Redundanz.
• Funktionen für fortgeschrittene Ordnung (können eine oder mehrere Funktionen als Parameter dauern oder eine Funktion zurückgeben) wichtige Teile der Funktionskombinationen in JavaScript. Sie werden verwendet, um neue Funktionen zu erstellen, indem vorhandene Funktionen kombiniert werden.
• JavaScript übernimmt Funktionen als Werte und ermöglicht eine einfache Kombination größerer, kontextspezifischer Jobs. Die Verwendung von Funktionen höherer Ordnung führt zu einer Trennung ihrer Definitionen und Aufrufe. Dies kann Entwickler von den strengen hierarchischen Einschränkungen befreien, die durch objektorientierte Programmierung auferlegt werden.
• Funktionskombinationen können mit JavaScript -Frameworks wie React oder VUE verwendet werden. Bei React ist die Kombination von Komponenten zum Erstellen komplexer Benutzeroberflächen ein übliches Muster. In ähnlicher Weise kann das Mixin -System von VUE als Funktionsform angesehen werden.

Was ist eine Funktion?

In der Tat ist eine Funktion ein -Verfahren , die die Ausführung einer Reihe von imperativen Schritten ermöglicht, um Nebenwirkungen oder Rückgabewerte auszuführen. Zum Beispiel:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Wenn diese Funktion mit einem Objekt mit den Eigenschaften von FirstName und LastName aufgerufen wird, gibt GetFullname eine Zeichenfolge zurück, die die beiden entsprechenden Werte enthält:

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Es ist erwähnenswert Angesichts der Tatsache, dass unsere Getfullname -Funktion eine 1 hat (d. H. Einen einzelnen Parameter) und nur eine Rückgabeanweisung hat, können wir diesen Ausdruck vereinfachen:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

Obwohl die Methoden dieser drei Ausdrücke unterschiedlich sind, erreichen sie alle am Ende den gleichen Zweck:

const getFullName = person => `${person.firstName} ${person.surname}`;

Erstellen Sie eine Funktion namens GetFulLName, auf die über die Nameseigenschaft zugegriffen werden kann.

akzeptiert eine Parameterperson.
Gibt eine berechnete Zeichenfolge zurück, die Person enthält.
kombiniert die Funktion durch Rückgabewert

Zusätzlich zur Zuweisung von Funktionsrückgabewerten für Deklarationen (z. B. const person = getPerson ();) können wir sie auch verwenden, um die Parameter anderer Funktionen zu füllen, oder Werte im Allgemeinen bereitstellen, wo JavaScript sie zulässt. Angenommen, wir haben Funktionen, die Nebenwirkungen von Protokollierung und SessionStorage ausführen:

Wir können diese Vorgänge mit dem Rückgabewert von Getperson mit verschachtelten Aufrufen ausführen:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Da die erforderlichen Parameter der Funktion nach der Art und Weise, wie sie aufgerufen wird, zur Verfügung gestellt werden müssen, wird die innerste Funktion zuerst aufgerufen. Im obigen Beispiel wird der Rückgabewert von Getperson an das Protokoll übergeben und der Rückgabewert des Protokolls wird an den Laden weitergeleitet. Durch die Kombination von Funktionsaufrufen, um Aussagen zu erstellen, können wir schließlich komplexe Algorithmen aus atomaren Bausteinen erstellen, aber es kann schwierig sein, diese Aufrufe zu verhindern.

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Zum Glück können wir eine elegante allgemeine Implementierung verwenden: Vereinfachen Sie das Array von Funktionen in Funktionen höherer Ordnung.

kumulatives Array mit Array.Prototype.Reduce

Die Reduzierung der Methode des

-Array -Prototyps erfordert eine Array -Instanz und sammelt es als einzelne Wert. Wenn wir ein Zahlenarray zusammenfassen möchten, können wir die folgende Methode verwenden:

In diesem Code -Segment nimmt REDUCE zwei Parameter an: die Rückruffunktion, die bei jeder Iteration aufgerufen wird, und der Anfangswert des an die Rückruffunktion übergebenen Gesamtparameters; Der nächste Iterationspass zu Total. Um dies weiter zu zersetzen, indem Sie die oben genannten Aufrufe untersuchen, um zu summieren:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

Unsere Rückruffunktion wird 5 -mal ausgeführt

• Da wir einen Anfangswert angeben, beträgt die Gesamtsumme im ersten Anruf
0
• Der erste Anruf wird 0 2 zurückgegeben, wodurch sich die Gesamtsumme im zweiten Anruf auf 2 auflöst.
• Das von diesem nachfolgende Aufruf 2 3 zurückgegebene Ergebnis wird dem Gesamtparameter im dritten Anruf usw. bereitgestellt.
Obwohl die Rückruffunktion zwei weitere Parameter akzeptiert, die den aktuellen Index und die Array -Instanz darstellen, die Array.Prototype aufruft

Akkumulator - Der Wert, der von der letzten Iterations -Rückruffunktion zurückgegeben wird. In der ersten Iteration wird dies auf den Anfangswert gelöst, und wenn kein Anfangswert angegeben wird, wird es auf das erste Element im Array gelöst.

currentValue - Der Array -Wert der aktuellen Iteration;
• kombinierende Funktion mit Array.Prototype.Reduce

Jetzt, da wir verstehen, wie man Arrays in einzelnen Werten vereinfacht, können wir diese Methode verwenden, um vorhandene Funktionen in neue Funktionen zu kombinieren:

Beachten Sie, dass wir die REST -Parameter -Syntax (...) verwenden, um eine beliebige Anzahl von Parametern in ein Array zu geben, damit die Verbraucher für jede Anrufe nicht explizit neue Array -Instanzen erstellen müssen. Kompose gibt auch eine andere Funktion zurück, die eine Komponierung einer Funktion höherer Ordnung macht, die einen Anfangswert (initialArg) akzeptiert. Dies ist von entscheidender Bedeutung, da wir daher neue, wiederverwendbare Funktionen kombinieren können, ohne sie zu rufen, bevor dies erforderlich ist.

Wie kombinieren wir andere Funktionen zu einer einzigen Funktion höherer Ordnung?

const getFullName = person => `${person.firstName} ${person.surname}`;

in diesem Code:

• Personerklärung wird sich auf {FirstName: 'Homer', Incident: 'Simpson'}
beschränken
• Die obige Darstellung der Person wird in die Konsole des Browsers
ausgegeben.
Person wird mit JSON serialisiert und dann SessionStorage

unter dem Taste der Person schreiben

Die Bedeutung der Anrufauftrag

Fähigkeit, eine beliebige Anzahl von Funktionen zu kombinieren, indem sie Dienstprogramme komponieren, um unseren Code prägnanter und abstrakter zu gestalten. Wir können jedoch einen Punkt hervorheben, indem wir den Inline -Anruf erneut besuchen:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Menschen finden es möglicherweise natürlich, dies mit unserer Komponierungsfunktion zu kopieren:

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Warum entschließt sich in diesem Fall in diesem Fall (4) === fehlte (4) auf False? Sie erinnern sich vielleicht, dass ich betont habe, wie man den internen Anruf überhaupt interpretiert. fandrets zurück 9. Wir können einfach die Aufrufreihenfolge von verschachtelten oder kombinierten Varianten von F umkehren, aber angesichts der Spezifität von COMPOSE zu Spiegeln verschachtelten Aufrufen benötigen wir eine Möglichkeit, die Funktion in rechts nach links zu reduzieren. .Reduceright liefert Folgendes:

const getFullName = (person) => {
  return `${person.firstName} ${person.surname}`;
};

mit dieser Implementierung, sowohl fnestiert (4) als auch fehlgeschlagen (4) auf 10. Unsere Funktion von GetpersonWithsieffects ist jedoch fälschlicherweise definiert. Es stellt sich heraus, dass unsere früheren Methoden weit verbreitet waren, aber oft als Rohr

:

const getFullName = person => `${person.firstName} ${person.surname}`;

bezeichnet werden

Durch die Verwendung unserer Rohrfunktion werden wir die von GetpersonWithsieffekten erforderliche Reihenfolge von links nach rechts behalten. Pipelines sind aus den oben beschriebenen Gründen zu einem Hauptbestandteil von RXJS geworden.

Funktionskombinationen als Alternativen zur Vererbung

Wir haben im vorherigen Beispiel gesehen, wie unendlich mehrere Funktionen zu größeren, wiederverwendbaren, zielgerichteten Einheiten kombiniert werden können. Ein weiterer Vorteil der Funktionskombination besteht darin, sich von der Starrheit der Vererbungsgraphen zu befreien. Angenommen, wir möchten die Protokollierung und das Speicherverhalten auf der Grundlage der Klassenhierarchie wiederverwenden.

const log = arg => {
  console.log(arg);
  return arg;
};

const store = arg => {
  sessionStorage.setItem('state', JSON.stringify(arg));
  return arg;
};

const getPerson = id => id === 'homer'
  ? ({ firstName: 'Homer', surname: 'Simpson' })
  : {};

Abgesehen von der Länge ist das direkte Problem mit diesem Code, dass wir die Vererbung für die Implementierung der Wiederverwendung missbrauchen. Ein potenziell ernsthafteres Problem ist die Benennung von Konflikten:

function getFullName(person) {
  return `${person.firstName} ${person.surname}`;
}

Wenn wir Mystate instanziieren und seine Store -Methode anrufen möchten, werden wir die modierbare Store -Methode nicht aufrufen, es sei denn , fragile Kopplung zwischen lagerbar. Dies kann mithilfe von Entitätssystemen oder Richtlinienmustern gemindert werden, wie ich an anderer Stelle eingeführt habe. Trotz der Vorteile der Erben der breiteren Taxonomie von Expressionssystemen bieten Funktionskombinationen eine flache, kurze Möglichkeit, ohne Abhängigkeit von Code für den Methodennamen zu teilen.

Zusammenfassung

JavaScript übernimmt Funktionen als Werte und generiert ihre Ausdrücke, sodass es einfach ist, größere, kontextspezifische Jobs zu kombinieren. Wenn Sie diese Aufgabe als kumulativ von Funktionsarrays betrachten, wird die Notwendigkeit von imperativen verschachtelten Aufrufen beseitigt, und die Verwendung von Funktionen höherer Ordnung führt zu einer Trennung ihrer Definitionen und Aufrufe. Darüber hinaus können wir die strengen hierarchischen Einschränkungen loswerden, die durch objektorientierte Programmierung auferlegt werden.

FAQs über Funktionskombinationen in JavaScript

Was bedeutet die Funktionskombination in JavaScript?

Funktionskombination ist ein grundlegendes Konzept in JavaScript und großer funktionaler Programmierung. Es ermöglicht Entwicklern, komplexe Funktionen zu erstellen, indem einfachere Funktionen kombiniert werden, wodurch die Wiederverwendbarkeit und Modularität ihres Codes verbessert wird. Dieser Ansatz erleichtert den Code leichter zu verstehen, zu debuggen und zu testen. Es fördert auch das Prinzip "Nicht wiederholen" (trocken), die Redundanz in der Codebasis zu verringern.

Wie hängt Funktionskombinationen auf das Konzept der Funktionen höherer Ordnung zusammen?

Funktionen mit hoher Ordnung sind ein wesentlicher Bestandteil der Funktionskombinationen in JavaScript. Eine Funktion höherer Ordnung ist eine Funktion, die eine oder mehrere Funktionen als Parameter übernehmen, als Ergebnis eine Funktion zurückgeben oder beide Vorgänge gleichzeitig ausführen können. In Funktionskombinationen verwenden wir häufig Funktionen höherer Ordnung, um neue Funktionen zu erstellen, indem wir vorhandene Funktionen kombinieren.

Können Sie ein praktisches Beispiel für Funktionskombinationen in JavaScript angeben?

Betrachten wir natürlich ein einfaches Beispiel. Angenommen, wir haben zwei Funktionen, doppelt und inkrement. Double nimmt eine Zahl und multipliziert sie mit 2, und Increment fügt der Eingabe 1 hinzu. Wir können diese beiden Funktionen kombinieren, um eine neue Funktion zu erstellen, die eine Zahl verdoppelt und das Ergebnis erhöht.

const character = {
  firstName: 'Homer',
  surname: 'Simpson',
};

const fullName = getFullName(character);

console.log(fullName); // => 'Homer Simpson'

Was ist der Unterschied zwischen Funktionskombination und Funktionskette in JavaScript?

Funktionskombination und Funktionskette sind zwei verschiedene Möglichkeiten, Funktionen in JavaScript zu kombinieren. Funktionskombinationen beinhalten die Übergabe der Ausgabe einer Funktion als Eingabe an eine andere. Andererseits beinhaltet eine Funktionskette das Aufrufen mehrerer Funktionen in der Reihenfolge, wobei jede Funktion das Ergebnis der vorherigen Funktion aufruft. Obwohl beide Techniken ähnliche Ergebnisse erzielen können, entsprechen Funktionskombinationen eher den Prinzipien der funktionellen Programmierung.

Wie hilft die Funktionskombination beim Code -Test und beim Debuggen?

Funktionskombinationen erleichtern die Erzeugung kleiner reiner Funktionen, die nur eines tun und gut abschneiden. Diese Funktionen sind einfacher zu testen und zu debuggen als große monolithische Funktionen. Da jede Funktion unabhängig ist, können Sie sie einzeln testen, ohne sich um den Rest des Codes zu sorgen. Dies erleichtert es, Fehler im Code zu finden und zu beheben.

Sind Funktionskombinationen mit asynchronen Funktionen in JavaScript möglich?

Ja, Funktionskombinationen können mit asynchronen Funktionen in JavaScript verwendet werden. Dies erfordert jedoch mehr Aufmerksamkeit, da Sie sicherstellen müssen, dass die Ausgabe einer asynchronen Funktion korrekt an die nächste Funktion als Eingabe übergeben wird. Dies beinhaltet normalerweise die Verwendung von Versprechen oder asynchronen/warteten Syntax.

Was sind die potenziellen Nachteile oder Herausforderungen bei der Verwendung von Funktionskombinationen in JavaScript?

Obwohl die Funktionskombinationen viele Vorteile haben, kann es auch Komplexität einführen, wenn sie unsachgemäß verwendet. Zum Beispiel können tief verschachtelte Funktionsaufrufe schwer zu lesen und zu verstehen sein. Wenn die kombinierten Funktionen keine reinen Funktionen sind (d. H. Sie haben Nebenwirkungen), kann dies zu unerwarteten Ergebnissen führen. Daher ist es wichtig, Funktionskombinationen mit Vorsicht zu verwenden und sie mit guten Codierungspraktiken zu kombinieren.

Wie beziehen sich Funktionskombinationen mit dem Konzept der Currying in JavaScript?

Curriization ist eine Technik in JavaScript, bei der eine Funktion mit mehreren Parametern in eine Reihe von Funktionen konvertiert wird. Jede Funktion hat nur einen Parameter. Currying kann mit Funktionskombinationen verwendet werden, um flexiblere und wiederverwendbarere Funktionen zu erstellen. Tatsächlich bieten einige Versorgungsbibliotheken wie Lodash und Ramda sowohl Currying- als auch kombinatorische Funktionen.

Ist Funktionskombinationen mit JavaScript -Frameworks wie React oder Vue nützlich?

Ja, Funktionskombinationen können mit JavaScript -Frameworks wie React oder VUE verwendet werden. Tatsächlich ist bei React die Kombination von Komponenten zum Erstellen komplexer Benutzeroberflächen ein gemeinsames Muster. In ähnlicher Weise kann das Mixin -System von VUE als Funktionsform angesehen werden.

Welche Bibliotheken oder Tools gibt es, um Funktionskombinationen in JavaScript zu unterstützen?

Ja, es gibt mehrere Bibliotheken, die in JavaScript Dienstprogramme für Funktionskombinationen bereitstellen. Einige beliebte Bibliotheken sind Lodash, Ramda und Redux (für das staatliche Management). Diese Bibliotheken bieten Funktionen wie Kompose oder Rohr, wodurch die Kombination von Funktionen einfacher und effizienter wird.

Das obige ist der detaillierte Inhalt vonFunktionszusammensetzung in JavaScript mit Array.Prototype.ReDuceright. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!