Detaillierte Erklärung der Verwendung der Compose-Funktion und der Pipe-Funktion in JS

Funktion „Verfassen“

Mit der Compose-Funktion können Funktionen vereinfacht werden, die in verschachtelter Reihenfolge ausgeführt werden müssen. Verschachtelte Ausführung bedeutet, dass der Rückgabewert einer Funktion als Parameter einer anderen Funktion verwendet wird. Betrachten wir eine einfache Anforderung: Diese Anforderung ist sehr einfach und eine Berechnungsfunktion reicht aus:

const berechnen = x => (x + 10) * 10;
sei res = berechne(10);
konsole.log(res); // 200

Aber gemäß der funktionalen Programmierung, die wir zuvor besprochen haben, können wir die komplexen Schritte in mehrere einfache und wiederverwendbare Schritte aufteilen. Daher haben wir eine Additionsfunktion und eine Multiplikationsfunktion herausgearbeitet:

Konstante addieren = x => x + 10;
const multiplizieren = x => x * 10;

// Unsere Berechnung wird in eine verschachtelte Berechnung zweier Funktionen umgewandelt und der Rückgabewert der Additionsfunktion wird als Parameter der Multiplikationsfunktion verwendet let res = multiply(add(10));
console.log(res); // Das Ergebnis ist immer noch 200

Die obige Berechnungsmethode ist die verschachtelte Ausführung von Funktionen, und die Rolle unserer Komposition besteht darin, die verschachtelten Ausführungsmethoden als Parameter zu vereinfachen. Wenn eine verschachtelte Ausführung erfolgt, wird zuerst die Methode im Inneren, d. h. die Methode auf der rechten Seite, ausgeführt und kehrt dann nach links zurück. Unsere Kompositionsmethode beginnt auch mit dem Parameter auf der rechten Seite, sodass unser Ziel sehr klar ist. Wir benötigen eine Kompositionsmethode wie diese:

// Die Parameter werden von rechts nach links ausgeführt, also kommt die Multiplikation zuerst und die Addition zuletzt. let res = compose(multiply, add)(10);

Bevor wir darüber sprechen, schauen wir uns eine Funktion an, die wir verwenden müssen: Array.prototype.reduce

Array.Prototyp.Reduzieren

Die Reduce-Methode eines Arrays kann einen Akkumulationseffekt erzielen. Sie empfängt zwei Parameter, der erste ist eine Akkumulatormethode und der zweite ist der Initialisierungswert. Der Akkumulator erhält vier Parameter. Der erste ist der zuletzt berechnete Wert und der zweite der aktuelle Wert des Arrays. Diese beiden Parameter werden hauptsächlich verwendet. Die letzten beiden Parameter werden nicht häufig verwendet. Sie sind der aktuelle Index und das Array der aktuellen Iteration:

const arr = [[1, 2], [3, 4], [5, 6]];
// Der Anfangswert von prevRes ist der übergebene [] und wird nach jeder Iteration berechnet const flatArr = arr.reduce((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [1, 2, 3, 4, 5, 6]

Array.prototype.reduceRechts

Array.prototype.reduce iteriert von links nach rechts. Wenn Sie von rechts nach links iterieren müssen, verwenden Sie Array.prototype.reduceRight.

const arr = [[1, 2], [3, 4], [5, 6]];
// Der Anfangswert von prevRes ist der übergebene [] und wird nach jeder Iteration berechnet const flatArr = arr.reduceRight((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [5, 6, 3, 4, 1, 2]

Wie implementieren wir also diese Compose-Methode? Wir müssen Array.prototype.reduceRight verwenden:

const komponieren = Funktion(){
  // Speichere die empfangenen Parameter in einem Array, args == [multiplizieren, addieren]
  const args = [].slice.apply(arguments);
  Rückgabefunktion (x) {
    return args.reduceRight((res, cb) => cb(res), x);
  }
}

// Lassen Sie uns diese Methode überprüfen. Let calculate = compose(multiply, add);
sei res = berechne(10);
console.log(res); // Das Ergebnis ist immer noch 200

Die obige Compose-Funktion wäre mit ES6 übersichtlicher:

const compose = (...args) => x => args.reduceRight((res, cb) => cb(res), x);

Die Middleware von Redux wird mithilfe von Compose implementiert und die Ladereihenfolge des Loaders in Webpack verläuft ebenfalls von rechts nach links, da sie ebenfalls mithilfe von Compose implementiert wird.

Pipe-Funktion

Die Pipe-Funktion ist dieselbe wie die Compose-Funktion, und die Parameter sind ebenfalls flach angeordnet, die Reihenfolge ist jedoch von links nach rechts. Lassen Sie es uns implementieren. Ändern Sie einfach „reduceRight“ in „reduce“:

const pipe = Funktion(){
  const args = [].slice.apply(arguments);
  Rückgabefunktion (x) {
    returniere args.reduce((res, cb) => cb(res), x);
  }
}

//Ändern Sie die Reihenfolge der Parameter von links nach rechts. Let Calculate = Pipe (Add, Multiplizieren);
sei res = berechne(10);
console.log(res); // Das Ergebnis ist immer noch 200

ES6-Schreiben:

const pipe = (...args) => x => args.reduce((res, cb) => cb(res), x)

Oben finden Sie eine ausführliche Erläuterung der Verwendung der Compose-Funktion und der Pipe-Funktion in JS. Weitere Informationen zu JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!