Angular Academy · Leçon

Opérateurs de filtrage

Filtrez les flux avec filter, debounceTime et distinctUntilChanged.

Opérateurs de filtrage est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Rôle des opérateurs de filtrage

Les opérateurs de filtrage déterminent quelles valeurs émises sont transmises et lesquelles sont supprimées, ou à quelle fréquence les valeurs sont autorisées. Ils sont essentiels pour obtenir des flux propres et efficaces.

filter

filter n'émet que les valeurs qui satisfont un prédicat — comme Array.filter, mais au fil du temps.

import { of, filter } from 'rxjs';

of(1, 2, 3, 4).pipe(
  filter(n => n % 2 === 0)
).subscribe(v => console.log(v)); // 2, 4

debounceTime

debounceTime attend une pause dans les émissions, puis émet la dernière valeur. C'est la solution classique pour les événements d'entrée trop fréquents.

import { debounceTime } from 'rxjs';

searchInput$.pipe(
  debounceTime(300)
).subscribe(term => console.log('search', term));
// emits only after 300ms of silence

distinctUntilChanged

distinctUntilChanged supprime une valeur si elle est égale à la précédente, ce qui évite les traitements redondants.

import { of, distinctUntilChanged } from 'rxjs';

of('a', 'a', 'b', 'b', 'a').pipe(
  distinctUntilChanged()
).subscribe(v => console.log(v)); // a, b, a

Combiner pour une recherche

Le pipeline de recherche classique combine les trois opérateurs afin de réduire au minimum le nombre de requêtes.

searchInput$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  filter(term => term.length > 2),
  switchMap(term => this.http.get('/api?q=' + term))
).subscribe(results => console.log(results));

take

take(n) émet les n premières valeurs, puis termine le flux — pratique pour lire une seule fois une source continue.

import { interval, take } from 'rxjs';

interval(1000).pipe(
  take(3)
).subscribe(v => console.log(v)); // 0, 1, 2 then complete

first et last

first() émet la première valeur (éventuellement selon un prédicat), puis termine le flux ; last() émet la dernière valeur lorsque le flux se termine.

import { of, first, last } from 'rxjs';

of(1, 2, 3).pipe(first()).subscribe(v => console.log(v)); // 1
of(1, 2, 3).pipe(last()).subscribe(v => console.log(v));  // 3

takeWhile et skip

takeWhile émet les valeurs tant qu'une condition est respectée, puis termine le flux ; skip(n) ignore les n premières valeurs.

import { of, takeWhile, skip } from 'rxjs';

of(1, 2, 3, 4, 1).pipe(takeWhile(n => n < 3))
  .subscribe(v => console.log(v)); // 1, 2
of(1, 2, 3).pipe(skip(1)).subscribe(v => console.log(v)); // 2, 3

throttleTime contre debounceTime

throttleTime émet la première valeur, puis ignore les autres pendant une période donnée — pratique pour limiter la fréquence des événements de défilement. debounceTime attend le silence — pratique pour une recherche. Ces opérateurs ne sont pas équivalents.

distinctUntilChanged avec une clé

Pour les objets, transmettez un comparateur ou un sélecteur de clé afin que l'égalité repose sur le champ pertinent.

source$.pipe(
  distinctUntilChanged((a, b) => a.id === b.id)
).subscribe(v => console.log(v));

Pourquoi le filtrage est important

Le filtrage réduit les appels HTTP, les nouveaux rendus et les calculs inutiles. Un flux correctement filtré peut faire passer une fonctionnalité de recherche de dizaines de requêtes à seulement quelques-unes.

Vérification rapide

Vérifiez votre compréhension des opérateurs de filtrage.

Récapitulatif : opérateurs de filtrage

Les opérateurs de filtrage contrôlent quelles valeurs circulent et à quelle fréquence.

filter : transmission fondée sur un prédicat.
debounceTime : attend le silence.
distinctUntilChanged : supprime les répétitions.
take/first/skip : contrôle positionnel.

Ensuite : les opérateurs de combinaison.

Questions Fréquemment Posées

La leçon « Opérateurs de filtrage » est-elle gratuite ?

Oui — le texte complet de « Opérateurs de filtrage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Opérateurs de filtrage » ?

Filtrez les flux avec filter, debounceTime et distinctUntilChanged. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Opérateurs de filtrage » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy