RxJS Básico: Operadores de Filtro
Operadores que filtran el flujo de datos en un obserable.
take
Tomará los primeros X eventos emitidos.
of(1, 2, 3).pipe(take(2)).subcribe(); // 1, 3
takeWhile
Tomará los primeros eventos emitidos hasta que cumplan una condición.
of(1, 2, 3, 1, 2, 3)
.pipe(takeWhile((x) => x < 3))
.subcribe(); // 1,2
takeUntil
Tomará los primeros eventos emitidos hasta que otro observable emita una valor.
const click$ = fromEvent(document, "click");
interval(100).pipe(takeUntil(click$)).subcribe(); // 1,2,3,4, click!
distinctUntilChanged
Continuará con el flujo siempre que los valores sean distintos al anterior. Por defecto no necesita parámetros pero admite una función para comparar entre el anterior y siguiente valor
of(1, 2, 3, 3, 1, 2, 2, 3).pipe(distinctUntilChanged()).subcribe(); // 1,2,3,1,2,3
of(1, "1", 2, 3, 3, 1, 2, 2, 3)
.pipe(distinctUntilChanged((prev, curr) => prev.toString() === curr.toString()))
.subcribe(); // 1,2,3,1,2,3
distinctUntilKeyChanged
Igual que distinctUntilChanged dónde podemos especificar una propiedad para comparar
of(
{name = 'Alex', age: 33 },
{name = 'Alex', age: 32 },
{name = 'Alex', age: 33 }
).pipe(
distinctUntilKeyChanged('name')
).subcribe()// {name = 'Alex', age: 33 }
debounceTime
Ignora todos los eventos hasta que no pase el tiempo definido. Una vez devuelto un valor, comienza a contar desde cero nuevamente.
fromEvent(document, "click").pipe(debounceTime(1000)).subcribe(); // un clic por cada segundo
throttleTime
Emite el primer evento recibido y luego comenza a contar el tiempo eliminando cualquier evento hasta que se cumpla el tiempo. Una vez cumplido ese tiempo, emite el siguiente evento que ingrese
fromEvent(document, "click").pipe(throttleTime(1000)).subcribe(); // el primer click y luego un clic por cada segundo que haya pasado
sampleTime
Divide el tiempo en slots del mismo tamaño y una vez cumplido cada slot de tiempo, devuelve el último valor diferente recibido.
fromEvent(document, "click").pipe(sampleTime(1000)).subcribe(); // el último clic de cada segundo
auditTime
Cada vez que recibe un evento, comienza a contar el tiempo que al cumplirse emite el último valor recibido (puede ser igual o distinto al que disparó la cuenta)
fromEvent(document, "click").pipe(auditTime(1000)).subcribe(); // el último clic recibido dentro de cada segundo que pasa empezando a contar desde un click