Welche Operatoren kennen Sie für die Arbeit mit…

Operatoren zur Arbeit mit Datenströmen, die insbesondere im Kontext der asynchronen Programmierung und reaktiven Bibliotheken (wie RxJS) relevant sind, können in mehrere Kategorien unterteilt werden.

Erzeugende Operatoren (Creation Operators): Werden verwendet, um einen neuen Datenstrom zu erstellen.

of(): Erstellt einen Strom, der eine feste Menge von Werten ausgibt.

// Aus RxJS
import { of } from 'rxjs';

const source = of(1, 2, 3); // Strom, der 1, 2, 3 ausgibt

from(): Wandelt verschiedene Datenquellen (Promise, Iterable, ArrayLike) in einen Strom um.

// Aus RxJS
import { from } from 'rxjs';

const source = from([10, 20, 30]); // Strom aus einem Array

interval(): Erstellt einen Strom, der sequenzielle Zahlen in einem festgelegten Zeitintervall ausgibt.

// Aus RxJS
import { interval } from 'rxjs';

const source = interval(1000); // Strom, der jede Sekunde Zahlen ausgibt

timer(): Erstellt einen Strom, der nach einer festgelegten Zeit einen Wert ausgibt, optional mit nachfolgenden Werten in Intervallen.
fromEvent(): Erstellt einen Strom aus DOM-Ereignissen oder EventEmitter.

Transformierende Operatoren (Transformation Operators): Ändern die Werte, die vom Strom ausgegeben werden.

map(): Transformiert jeden Wert, der vom Strom ausgegeben wird, indem eine Funktion darauf angewendet wird.

// Aus RxJS
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const source = of(1, 2, 3);
const result = source.pipe(map(x => x * 2)); // Strom mit Werten 2, 4, 6

pluck(): Extrahiert eine Eigenschaft aus jedem Objekt, das vom Strom ausgegeben wird.
scan(): Wendet eine Akkumulationsfunktion auf jeden Wert des Stroms an und gibt die Zwischenergebnisse aus.

mergeMap() / flatMap(): Projiziert jeden Wert des ursprünglichen Stroms in einen neuen Strom (Inner Observable) und verbindet (glättet) diese in einen einzigen Ausgangsstrom. Ermöglicht asynchrone Operationen für jeden Wert.

// Aus RxJS
import { of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

const source = of(1, 2);
const result = source.pipe(mergeMap(val => of(val + 'a', val + 'b'))); // Strom mit Werten '1a', '1b', '2a', '2b'

switchMap(): Ähnlich wie mergeMap, aber bei Ausgabe eines neuen Wertes vom ursprünglichen Strom wird die Arbeit des vorherigen internen Stroms abgebrochen. Nützlich für Autovervollständigung oder Anfragen mit Abbruch.
concatMap(): Ähnlich wie mergeMap, garantiert jedoch, dass die internen Ströme sequenziell ausgeführt werden.

Filter-Operatoren (Filtering Operators): Wählen Werte aus, die vom Strom ausgegeben werden.

filter(): Gibt nur Werte durch, die eine festgelegte Bedingung erfüllen.

// Aus RxJS
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

const source = of(1, 2, 3, 4);
const result = source.pipe(filter(x => x % 2 === 0)); // Strom mit Werten 2, 4

take(): Nimmt nur die ersten N Werte.
takeUntil(): Nimmt Werte, bis ein anderer Strom einen Wert ausgibt.
skip(): Überspringt die ersten N Werte.
debounceTime(): Gibt einen Wert nur aus, nachdem der Strom eine Zeit lang inaktiv war. Nützlich, um zu häufige Aktionen zu vermeiden.
distinctUntilChanged(): Gibt nur einen Wert aus, wenn er sich vom vorherigen unterscheidet.

Kombinationsoperatoren (Combination Operators): Kombinieren mehrere Ströme zu einem.

combineLatest(): Kombiniert die letzten Werte mehrerer Ströme und gibt bei jeder Änderung eines der Eingabeströme ein Array der letzten Werte aus.
zip(): Kombiniert Werte mehrerer Ströme in ein Array nach Index.
merge(): Führt mehrere Ströme zusammen und gibt ihre Werte in der Reihenfolge aus, in der sie eintreffen.
concat(): Führt mehrere Ströme sequenziell aus (zuerst der erste bis zum Abschluss, dann der zweite usw.).

Fehlerbehandlungsoperatoren (Error Handling Operators): Bestimmen das Verhalten bei Fehlern im Strom.

catchError(): Fängt einen Fehler ab und ermöglicht, den Strom fortzusetzen oder zu ersetzen.

// Aus RxJS
import { throwError } from 'rxjs';
import { catchError, of } from 'rxjs/operators';

const source = throwError(() => new Error('Etwas ist schief gelaufen'));
const result = source.pipe(catchError(err => of('Fehler erkannt'))); // Strom mit Wert 'Fehler erkannt'

retry(): Versucht, die Subscription N-mal bei Fehler erneut durchzuführen.

Abschlussoperatoren (Completion Operators): Bestimmen das Verhalten beim Abschluss des Stroms.

finalize(): Führt eine Aktion beim Abschluss (erfolgreich oder mit Fehler) oder bei Abbestellung aus.
tap(): Ermöglicht Nebenwirkungen (z.B. Logging) ohne die Werte des Stroms zu verändern.

Dies ist keine vollständige Liste, aber eine wichtige Auswahl an Operatoren, mit denen man häufig in der Frontend-Entwicklung arbeitet, insbesondere bei Verwendung des reaktiven Ansatzes.

Welche Operatoren kennen Sie für die Arbeit mit Streams?