Observable: Methode reduce()
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die Methode reduce() der Schnittstelle Observable gibt ein Promise zurück, das mit einem einzelnen Wert erfüllt wird. Dieser entsteht, indem die Werte des Quell-Observables mithilfe einer Reducer-Funktion kombiniert werden.
Syntax
reduce(reducer)
reduce(reducer, initialValue)
reduce(reducer, initialValue, options)
Parameter
reducer-
Eine Funktion, die Quellwerte in einem Akkumulator zusammenführt. Ihr Rückgabewert wird beim nächsten Aufruf als Argument
accumulatorübergeben. Die Funktion wird mit den folgenden Argumenten aufgerufen:accumulator-
Der Wert, den der vorherige Aufruf von
reducerzurückgegeben hat. Beim ersten Aufruf ist diesinitialValue, falls angegeben, andernfalls der erste Quellwert. value-
Der aktuell verarbeitete Wert. Beim ersten Aufruf ist dies der erste Quellwert, falls
initialValueangegeben wurde, andernfalls der zweite Quellwert. index-
Der Index des aktuell verarbeiteten Werts. Beim ersten Aufruf ist dies
0, fallsinitialValueangegeben wurde, andernfalls1.
initialValueOptional-
Der Anfangswert des Akkumulators. Wird er weggelassen, wird der erste Quellwert verwendet, und der Reducer beginnt mit dem zweiten Quellwert. Die explizite Angabe von
undefinedzählt als Angabe eines Anfangswerts. optionsOptional-
Ein Optionsobjekt mit den folgenden Eigenschaften:
signalOptional-
Ein
AbortSignal, mit dem der Vorgang abgebrochen werden kann. Wird das Signal abgebrochen, wird das Abonnement der Quelle beendet und das Promise mit demreasondes Signals zurückgewiesen. Ist das Signal bereits abgebrochen, wird das Promise zurückgewiesen, ohne die Quelle zu abonnieren.
Rückgabewert
Ein Promise, das beim Abschluss der Quelle mit dem endgültigen Akkumulatorwert erfüllt wird. Wird die Quelle abgeschlossen, ohne Werte ausgegeben zu haben, wird das Promise mit initialValue erfüllt, falls angegeben. Andernfalls wird es mit einem TypeError zurückgewiesen.
Falls bei der Quelle ein Fehler auftritt oder reducer eine Ausnahme auslöst, wird das Promise mit diesem Fehler zurückgewiesen. Wird der Vorgang abgebrochen, wird das Promise mit dem Abbruchgrund zurückgewiesen.
Beschreibung
Wie andere Operatoren, die ein Promise zurückgeben, abonniert diese Methode die Quelle sofort beim Aufruf. Ein separater Aufruf von subscribe() ist nicht erforderlich.
Ist initialValue angegeben, wird reducer für jeden Quellwert aufgerufen, beginnend bei Index 0. Andernfalls initialisiert der erste Quellwert den Akkumulator, und reducer beginnt mit dem zweiten Wert bei Index 1. Gibt die Quelle nur einen Wert aus und wurde kein Anfangswert angegeben, wird das Promise mit diesem Wert erfüllt, ohne reducer aufzurufen.
Der Rückgabewert von reducer wird unverändert an den nächsten Aufruf übergeben, ohne darauf zu warten. Ist der endgültige Akkumulatorwert ein Promise, übernimmt das zurückgegebene Promise dessen endgültigen Zustand. Wird die Quelle nie abgeschlossen, bleibt das Promise ausstehend, sofern kein Fehler auftritt und der Vorgang nicht abgebrochen wird.
Löst reducer eine Ausnahme aus, wird das Abonnement der Quelle beendet.
Beispiele
>reduce() verwenden
Dieses Beispiel zählt die ersten fünf Klicks auf eine Schaltfläche mithilfe eines Akkumulators und zeigt nach Abschluss des Streams die Gesamtzahl an. Klicken Sie nach dem Ende des Streams auf „Restart“, um es erneut zu versuchen.
const btn = document.querySelector("button");
const output = document.querySelector("p");
const restart = document.querySelector("#restart");
function start() {
restart.disabled = true;
output.textContent = "Waiting for clicks";
btn
.when("click")
.take(5)
.reduce((count) => count + 1, 0)
.then((result) => {
restart.disabled = false;
output.textContent = `Total clicks: ${result}`;
});
}
restart.when("click").subscribe(start);
start();
Spezifikationen
| Spezifikation |
|---|
| Observable> # dom-observable-reduce> |