Angular Academy · Lección

Operadores de filtrado

Filtre flujos con filter, debounceTime y distinctUntilChanged.

Operadores de filtrado es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Qué hacen los operadores de filtrado

Los operadores de filtrado deciden qué valores emitidos pasan y cuáles se descartan, o con qué frecuencia se permiten los valores. Son esenciales para crear streams limpios y eficientes.

filter

filter emite solo los valores que cumplen un predicado, como Array.filter a lo largo del tiempo.

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 una pausa en las emisiones y después emite el valor más reciente. Es la solución clásica para los 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 un valor si es igual al anterior, evitando trabajo redundante.

import { of, distinctUntilChanged } from 'rxjs';

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

Combinación para búsquedas

La canalización de búsqueda habitual combina los tres para minimizar las solicitudes.

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) emite los primeros n valores y después completa el stream; resulta útil para lecturas únicas de una fuente que sigue activa.

import { interval, take } from 'rxjs';

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

first y last

first() emite el primer valor (opcionalmente, el que coincida con un predicado) y después completa; last() emite el valor final al completarse.

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 y skip

takeWhile emite mientras se cumpla una condición y después completa; skip(n) ignora los primeros 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 frente a debounceTime

throttleTime emite el primer valor y después ignora los demás durante un intervalo; es adecuado para limitar la frecuencia del desplazamiento. debounceTime espera a que haya silencio; es adecuado para las búsquedas. No son lo mismo.

distinctUntilChanged con una clave

Para objetos, pase un comparador o un selector de claves para que la igualdad se base en el campo relevante.

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

Por qué importa el filtrado

El filtrado reduce las llamadas HTTP, los renderizados y los cálculos innecesarios. Un stream bien filtrado puede reducir una funcionalidad de búsqueda de docenas de solicitudes a solo unas pocas.

Comprobación rápida

Compruebe su comprensión de los operadores de filtrado.

Repaso: operadores de filtrado

Los operadores de filtrado controlan qué valores fluyen y con qué frecuencia.

filter: paso basado en un predicado.
debounceTime: espera al silencio.
distinctUntilChanged: descarta repeticiones.
take/first/skip: control posicional.

Siguiente: operadores de combinación.

Preguntas frecuentes

¿La lección «Operadores de filtrado» es gratis?

Sí — el texto completo de «Operadores de filtrado» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Operadores de filtrado»?

Filtre flujos con filter, debounceTime y distinctUntilChanged. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Operadores de filtrado»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy