Observable: Methode map()
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 map() der Schnittstelle Observable gibt ein neues Observable zurück, das die Werte des Quell-Observables ausgibt, nachdem jeder Wert durch eine Abbildungsfunktion umgewandelt wurde.
Syntax
map(mapper)
Parameter
mapper-
Eine Funktion, die für jeden vom Quell-Observable ausgegebenen Wert ausgeführt wird. Ihr Rückgabewert wird vom zurückgegebenen Observable ausgegeben. Die Funktion wird mit den folgenden Argumenten aufgerufen:
Rückgabewert
Ein neues Observable. Wenn es abonniert wird, ruft es mapper für jeden vom Quell-Observable ausgegebenen Wert auf und gibt den jeweiligen Rückgabewert aus. 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: Ihr Aufruf erstellt ein neues Observable, ohne das Quell-Observable zu abonnieren. Die Verarbeitung beginnt, sobald das zurückgegebene Observable abonniert wird.
Wenn mapper eine Ausnahme auslöst, gibt das zurückgegebene Observable einen Fehler aus und beendet das Abonnement des Quell-Observables. Fehler des Quell-Observables werden ebenfalls weitergegeben.
Der Rückgabewert von mapper wird unverändert ausgegeben. Insbesondere wird ein zurückgegebenes Promise als Promise-Objekt ausgegeben; es wird nicht auf dessen Erfüllung gewartet. Um Werte aus einem zurückgegebenen Promise oder einem anderen Observable auszugeben, verwenden Sie flatMap() oder switchMap().
Beispiele
map() verwenden
Dieses Beispiel zeigt die Mauskoordinaten an, wenn sich der Mauszeiger über eines von zwei <div>-Elementen bewegt. Die Abbildungsfunktion extrahiert die Koordinaten aus jedem Mausereignis und legt sie in einem Objekt mit den Eigenschaften x und y ab.
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-map |