Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

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

js
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 reducer zurückgegeben hat. Beim ersten Aufruf ist dies initialValue, falls angegeben, andernfalls der erste Quellwert.

value

Der aktuell verarbeitete Wert. Beim ersten Aufruf ist dies der erste Quellwert, falls initialValue angegeben wurde, andernfalls der zweite Quellwert.

index

Der Index des aktuell verarbeiteten Werts. Beim ersten Aufruf ist dies 0, falls initialValue angegeben wurde, andernfalls 1.

initialValue Optional

Der Anfangswert des Akkumulators. Wird er weggelassen, wird der erste Quellwert verwendet, und der Reducer beginnt mit dem zweiten Quellwert. Die explizite Angabe von undefined zählt als Angabe eines Anfangswerts.

options Optional

Ein Optionsobjekt mit den folgenden Eigenschaften:

signal Optional

Ein AbortSignal, mit dem der Vorgang abgebrochen werden kann. Wird das Signal abgebrochen, wird das Abonnement der Quelle beendet und das Promise mit dem reason des 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.

js
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

Browser-Kompatibilität

Siehe auch