Observable: Methode map()

Syntax

map(mapper)

Parameter

mapper

Eine Funktion, die fr jeden vom Quell-Observable ausgegebenen Wert ausgefhrt wird. Ihr Rckgabewert wird vom zurckgegebenen Observable ausgegeben. Die Funktion wird mit den folgenden Argumenten aufgerufen:

value

Der aktuell verarbeitete Wert.

index

Der Index des aktuell verarbeiteten Werts, beginnend bei 0.

Rckgabewert

Ein neues Observable. Wenn es abonniert wird, ruft es mapper fr jeden vom Quell-Observable ausgegebenen Wert auf und gibt den jeweiligen Rckgabewert aus. Wenn das Quell-Observable abgeschlossen ist, wird auch das zurckgegebene Observable abgeschlossen.

Beschreibung

Wie andere Operatoren, die ein Observable zurckgeben, arbeitet diese Methode verzgert: Ihr Aufruf erstellt ein neues Observable, ohne das Quell-Observable zu abonnieren. Die Verarbeitung beginnt, sobald das zurckgegebene Observable abonniert wird.

Wenn mapper eine Ausnahme auslst, gibt das zurckgegebene Observable einen Fehler aus und beendet das Abonnement des Quell-Observables. Fehler des Quell-Observables werden ebenfalls weitergegeben.

Der Rckgabewert von mapper wird unverndert ausgegeben. Insbesondere wird ein zurckgegebenes Promise als Promise-Objekt ausgegeben; es wird nicht auf dessen Erfllung gewartet. Um Werte aus einem zurckgegebenen 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.

<div></div>
<div></div>
<p></p>

div {
  height: 120px;
  background-color: purple;
  margin-bottom: 40px;
}

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

Browser-Kompatibilitt

Siehe auch

• Observable.flatMap()
• Observables verwenden
• Erluterung zu Observable