Detaillierte Erklärung der Verwendung von Reduce Fold Unfold in JS

falten (reduzieren)

Reden wir über „Reduce“. Diese Funktion gefällt mir wirklich gut. Sie spart jede Menge Code und verfügt über einige deklarative Prototypen. Einige gängige Toolfunktionen wie „Flatten“, „DeepCopy“, „MergeDeep“ usw. werden mit „Reduce“ elegant und präzise implementiert. Reduce wird auch Fold genannt. Im Wesentlichen handelt es sich dabei um den Vorgang des Faltens eines Arrays. Dabei werden mehrere Werte im Array durch Berechnung in einen Wert umgewandelt. Jede Berechnung wird von einer Funktion verarbeitet. Diese Funktion ist das Kernelement von Reduce und wird Reducer genannt. Die Reducer-Funktion ist eine zweidimensionale Funktion, die einen einzelnen Wert zurückgibt. Die übliche Additionsfunktion ist Reducer.

const addReducer = (x, y) => x + y;

Die Add-Funktion ist ein Reducer. Am häufigsten wird sie in Verbindung mit der Reduce-Methode des Arrays verwendet.

[1, 2, 3, 4, 5].reduzieren(addReducer, 0) // 15

Um Reduce besser zu verstehen, implementieren wir diese Funktion mithilfe verschiedener Ideen.

Verwenden von for...of

const reduzieren = (f, init, arr) => {
  sei acc = init;
  für (const item of arr) {
    acc = f(ac, Artikel);
  }
  Rückgabe-Ac
}
// Führen Sie „reduceFor(addReducer, 0, [1, 2, 3, 4, 5])“ aus. // 15

Verwenden einer while-Schleife

reduzieren = (f, init, arr) => {
  sei acc = init;
  Strom lassen;
  sei i = 0;
  während ((aktuell = arr[i++])) {
    acc = f(ac, aktuell);
  }
  Rückgabe gem.
}

// Führen Sie „reduceFor(addReducer, 0, [1, 2, 3, 4, 5])“ aus. // 15

Eher wie eine Fold-Implementierung

Die obige Implementierung ist leicht zu verstehen, scheint aber den Faltvorgang nicht widerzuspiegeln. Das Falten sollte ein schichtweiser Komprimierungsvorgang des Arrays sein. Die obige Implementierung trennt tatsächlich das Array und die Logik und führt außerdem mehr Zwischenvariablen ein, obwohl es intern keine Nebenwirkungen gibt.
Wenn Sie aus einer anderen Perspektive darüber nachdenken, können Sie den Faltprozess tatsächlich besser widerspiegeln, wenn Sie den Status über Parameter übergeben. Die Parameter hier sind Werte, die sich auf sich allmählich ändernde Arrays und berechnete Werte beziehen, und Sie können sie so zustandslos wie möglich machen. Die Implementierung einer wirklich reinen Funktion hat keine Ausdrücke, sondern nur Anweisungen, was durch Rekursion erreicht werden kann. Die folgende Implementierung verwendet Endrekursion, um Reduce zu implementieren. Sie können sehen, wie sich das Array und die berechneten Werte während des Implementierungsprozesses ändern. Es passt sehr gut zur Namensfalte

Funktion reduzieren(f, init, arr) {
  wenn (arr.length === 0) return init;
  const [Kopf, ...Rest] = arr;
  returniere ReduceRecursion(f, f(init, head), rest);
}

// Führen Sie „reduceFor(addReducer, 0, [1, 2, 3, 4, 5])“ aus. // 15

entfalten

Das Gegenteil von fold ist unfold. Wie der Name schon sagt, generiert unfold eine Reihe von Werten basierend auf einem umgekehrten Reducer. Wenn an diesem Punkt die ursprüngliche Reducer-Implementierung ähnlich wie (a, b) -> c ist, dann ist das Gegenteil c -> [a, b]. Das Generieren einer Sequenz ist eine sehr grundlegende Operation, aber selbst diese grundlegende Operation hat viele Implementierungsideen. Bevor wir Unfold vorstellen, schauen wir uns andere Möglichkeiten zur Implementierung von Sequenzen an und ziehen dann einen Vergleich.

Sequenzimplementierung

Bereich (0, 100, 5)

Erwartete Ergebnisse

[0, 5, 10, ... 95]

Array-Implementierung

Dazu verrate ich nicht viel, das sollte jeder wissen.

Bereich = (erster, letzter, Schritt) => {
  const n = (letzter - erster) / Schritt + 1;
  gibt Array.from({ Länge: n - 1 }) zurück
            .map((_, index) => erster + index * Schritt);
}
// Sie können auch den zweiten Parameter von from verwenden // Array.from({ length: n }, (_, i) => first + i * step);

Generatorimplementierung

Es gibt ein weiteres leistungsfähiges Tool zum Generieren von Sequenzen, nämlich den Generator, der zum Generieren von Daten verwendet wird. Der Generator gibt einen Iterator zurück, der ebenfalls problemlos Sequenzen erzeugen kann

Funktion*Bereich(erster, letzter, Schritt) {
  sei acc = zuerst;
  während (account < last) {
    Rendite gem.
    beschl. = beschl. + Schritt;
  }
}
[...Bereich(0, 100, 5)]

Im Vergleich dazu konzentriert sich der Generator mehr auf den Generierungsprozess, während Array sich auf den Datenänderungsprozess konzentriert.

Umsetzung entfalten

Bevor wir Unfold implementieren, klären wir zunächst die Implementierungsideen. Wie Fold verwendet es auch Rekursion, und die entsprechenden Datenänderungen müssen während des Implementierungsprozesses sichtbar sein. Der allgemeine Ablauf ist wie folgt

0 -> [0, 5]

5 -> [5, 10]

10 -> [10, 15]

15 -> [15, 20]

...

90 -> [90, 95]

95 -> [95, 100]

Es ist ersichtlich, dass der Vorgang genau das Gegenteil von fold ist, was c -> [a, b] entspricht. Da der Anfangswert ein Array sein muss, benötigt unfold nur zwei Parameter, was wie folgt implementiert wird.

Funktion entfalten(f, init) {
  const g = (f, nächstes, acc) => {
    const Ergebnis = f(nächstes);
    const [Kopf, letzter] = Ergebnis || [];
    console.log(letztes);
    Ergebnis zurückgeben? g(f, letztes, acc.concat(Kopf)) : acc;
  };
  g(f, init, []) zurückgeben;
}

Bereich = R.curry((erster, letzter, Schritt) =>
  entfalten(nächstes => nächstes < letztes und [nächstes, nächstes + Schritt], 0)
)

//Bereich (0, 100, 5) ausführen

Zusammenfassen

Das Obige ist eine kurze Einführung in Fold und Unfold, zwei sehr wichtige Konzepte in der FP-Programmierung, kombiniert mit Reduce und einem Beispiel für die Generierung einer Sequenz. Natürlich dienen ihre Funktionen nicht nur zur Generierung von Sequenzen, sondern verfügen auch über viele leistungsstarke Funktionen.

Oben finden Sie eine ausführliche Erläuterung der Verwendung von Reduce Fold Unfold in JS. Weitere Informationen zu JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!