54. Opérateurs courants : map et filter

Les opérateurs sont des fonctions pures qui prennent un Observable en entrée et renvoient un nouvel Observable. Ils sont chaînés à l'aide de la méthode pipe().

1. La fonction pipe()

pipe() est utilisé pour ordonner plusieurs opérateurs, appliquant une logique de transformation ou de filtrage les uns après les autres.

typescript import { of } from 'rxjs'; import { map, filter } from 'rxjs/operators';

of(1, 2, 3, 4, 5).pipe( // opérateur 1 // opérateur 2 // ... ).subscribe(...);

2. Opérateur map (Transformation)

map est l'équivalent de la méthode map des tableaux JavaScript. Il applique une fonction à chaque valeur émise par l'Observable source et émet le résultat.

Exemple : Doubler les nombres

typescript of(1, 2, 3).pipe( map(value => value * 2) // Transforme 1 -> 2, 2 -> 4, 3 -> 6 ).subscribe(result => console.log('Mappé :', result)); // Sortie : 2, 4, 6

// Cas pratique : transformer la structure d'une réponse API : this.http.get<User[]>(...).pipe( map(users => users.map(user => user.name)) // Extraire uniquement les noms );

3. Opérateur filter (Sélection)

filter détermine quelles valeurs passent à travers le flux de l'Observable en fonction d'une fonction prédicat (une fonction renvoyant un booléen).

Exemple : Filtrer les nombres pairs

typescript of(1, 2, 3, 4, 5).pipe( filter(value => value % 2 === 0) // Ne garde que 2 et 4 ).subscribe(result => console.log('Filtré :', result)); // Sortie : 2, 4

// Exemple combiné : const clicks$ = fromEvent(document, 'click'); clicks$.pipe( filter((event: MouseEvent) => event.clientY > 100), // Seulement les clics en dessous de 100px map(event => event.clientX) ).subscribe(x => console.log('Position X :', x));