Observable: Methode filter()
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 filter() der Schnittstelle Observable gibt ein neues Observable zurück, das nur die Werte des Quell-Observables ausgibt, für die die bereitgestellte Callback-Funktion einen Truthy-Wert zurückgibt.
Syntax
filter(predicate)
Parameter
predicate-
Eine Funktion, die für jeden vom Quell-Observable ausgegebenen Wert ausgeführt wird. Sie sollte einen Truthy-Wert zurückgeben, damit das zurückgegebene Observable den Wert ausgibt, andernfalls einen Falsy-Wert. Die Funktion wird mit den folgenden Argumenten aufgerufen:
Rückgabewert
Ein neues Observable. Wenn es abonniert wird, ruft es predicate für jeden vom Quell-Observable ausgegebenen Wert auf und gibt den Wert nur dann aus, wenn predicate einen Truthy-Wert zurückgibt. Wenn das Quell-Observable abgeschlossen ist, wird auch das zurückgegebene Observable abgeschlossen.
Beschreibung
Wie andere Operatoren, die ein Observable zurückgeben, arbeitet diese Methode verzögert: Beim Aufruf wird ein neues Observable erstellt, ohne das Quell-Observable zu abonnieren. Die Verarbeitung beginnt, wenn das zurückgegebene Observable abonniert wird.
Wenn predicate eine Ausnahme auslöst, meldet das zurückgegebene Observable einen Fehler und beendet das Abonnement des Quell-Observables. Fehler des Quell-Observables werden ebenfalls weitergeleitet.
Der index zählt alle Werte des Quell-Observables, auch diejenigen, die herausgefiltert werden. Der Rückgabewert von predicate wird in einen booleschen Wert umgewandelt, ohne auf ihn zu warten. Eine asynchrone Funktion gibt daher unabhängig von ihrem späteren Ergebnis ein Truthy-Promise-Objekt zurück.
Beispiele
filter() verwenden
Dieses Beispiel zeigt die Mauskoordinaten nur dann an, wenn sich der Mauszeiger über einem von zwei <div>-Elementen bewegt. Der Filter schließt Ereignisse aus, deren Ziel ein anderes Element ist.
const outputElem = document.querySelector("p");
document.body
.when("mousemove")
.filter((e) => e.target.matches("div"))
.map((e) => ({ x: e.clientX, y: e.clientY }))
.subscribe({ next: reportCoords });
function reportCoords(e) {
outputElem.textContent = `${e.x},${e.y}`;
}
Spezifikationen
| Spezifikation |
|---|
| Observable # dom-observable-filter |