Angular Academy · Aula

Operadores de filtragem

Filtre fluxos com filter, debounceTime e distinctUntilChanged.

Operadores de filtragem é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

O que os operadores de filtragem fazem

Os operadores de filtragem decidem quais valores emitidos passam adiante e quais são descartados, ou com que frequência os valores são permitidos. Eles são essenciais para manter fluxos limpos e eficientes.

filtrar

filter emite apenas os valores que passam por um predicado — como Array.filter ao longo do tempo.

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 espera uma pausa nas emissões e então emite o valor mais recente. É a solução clássica para eventos de entrada ruidosos.

import { debounceTime } from 'rxjs';

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

distinctUntilChanged

distinctUntilChanged descarta um valor se ele for igual ao anterior, evitando trabalho redundante.

import { of, distinctUntilChanged } from 'rxjs';

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

Combinando para a pesquisa

O pipeline de pesquisa padrão combina os três operadores para minimizar as solicitações.

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

obter

take(n) emite os primeiros n valores e depois conclui o fluxo — útil para leituras únicas de uma fonte contínua.

import { interval, take } from 'rxjs';

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

primeiro e último

first() emite o primeiro valor (opcionalmente correspondente a um predicado) e depois conclui; last() emite o valor final quando ocorre a conclusão.

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

obter enquanto e ignorar

takeWhile emite enquanto uma condição for satisfeita e depois conclui; skip(n) ignora os primeiros n valores.

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 versus debounceTime

throttleTime emite o primeiro valor e ignora os demais durante uma janela — é útil para limitar a taxa de rolagem. debounceTime espera pelo silêncio — é útil para pesquisas. Eles não são iguais.

distinctUntilChanged com chave

Para objetos, passe um comparador ou seletor de chave para que a igualdade seja baseada no campo relevante.

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

Por que a filtragem é importante

A filtragem reduz chamadas HTTP, novas renderizações e cálculos desnecessários. Um fluxo bem filtrado pode reduzir uma funcionalidade de pesquisa de dezenas de solicitações para apenas algumas.

Verificação rápida

Teste sua compreensão dos operadores de filtragem.

Recapitulação: operadores de filtragem

Os operadores de filtragem controlam quais valores fluem e com que frequência.

filter: passagem baseada em predicado.
debounceTime: espera pelo silêncio.
distinctUntilChanged: descarta repetições.
take/first/skip: controle posicional.

A seguir: operadores de combinação.

Perguntas Frequentes

A aula “Operadores de filtragem” é grátis?

Sim — o texto completo de “Operadores de filtragem” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Operadores de filtragem”?

Filtre fluxos com filter, debounceTime e distinctUntilChanged. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Operadores de filtragem”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy