angular 中的 Rxjs 滤波器运算符

Question

We have filter operator in Rxjs to filter the emitted items by the observables based on a condition.

Of(1,2,3).pipe( filter(item = item >= 2) )

So here we can filter the emitted numbers that are >=2. We get (2,3)

I can do the filtering on the same condition after subscribing to the items. Of(1,2,3).subscribe((items)=>{ items = items.filter(item=>item>=2); } )

If this can be done after subscribing, what is the real significance of the operator filter in Rxjs?

Answer 1

One possible reason is that filtering before subscription allows you to avoid emitting values to subscribers if the result of the filter isn't different from the previous emit. You could accomplish this with distinctUntilChanged() .

Here's filtering after subscription (notice the Observable emits twice).

const source = new Subject<number[]>();

source.asObservable().subscribe(items => {
    console.log(items.filter(i => i >= 2));
});

source.next([1, 2, 3, 4]);
// Logs: [2, 3, 4]

source.next([-1, 1, 2, 3, 4]);
// Logs: [2, 3, 4]

Here's filtering before subscription (notice the Observable only emits once).

const source = new Subject<number[]>();

source.asObservable().pipe(
  filter(items => items.filter(i => i >= 2)),
  distinctUntilChanged()
).subscribe(items => console.log);

source.next([1, 2, 3, 4]);
// Logs: [2, 3, 4]

source.next([-1, 1, 2, 3, 4]);
// Doesn't log anything because the result
// of pipe(filter()) wasn't different from
// the previous value, so the observable
// didn't emit.