angular 中的 Rxjs 濾波器運算符

Question

我們在 Rxjs 中有過濾器運算符，用於根據條件過濾可觀察對象發出的項目。

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

所以在這里我們可以過濾 >=2 的發射數字。 我們得到 (2,3)

訂閱項目后，我可以在相同的條件下進行過濾。 Of(1,2,3).subscribe((items)=>{ items = items.filter(item=>item>=2); } )

如果訂閱后可以做到這一點，那么Rxjs中的算子過濾器的真正意義是什么？

Answer 1

一個可能的原因是，如果過濾器的結果與之前的發射沒有不同，那么訂閱前的過濾允許您避免向訂閱者發射值。 您可以使用distinctUntilChanged()來完成此操作。

這是訂閱后的過濾（注意 Observable 發出兩次）。

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]

這是訂閱前的過濾（注意 Observable 只發出一次）。

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.