為什么我的 RxJS 代碼在對流進行操作時不生效？

RxJS 流操作無效的常見問題及解決方法

在使用 RxJS 處理數據流時，開發者經常會遇到操作符無法按預期工作的情況。本文將分析一個典型案例，解釋問題根源并提供解決方案。

問題：偶數乘以二操作失效

假設我們需要處理一個數字數組，篩選出偶數并將其乘以 2。使用 of 操作符和 Filter、map 操作符的代碼如下：

import { of } from 'rxjs'; import { map, filter } from 'rxjs/operators';  const source$ = of([1, 2, 3, 4, 5]); source$.pipe(   filter(item => item % 2 === 0),   map(num => num * 2) ).subscribe(value => console.log(value));

預期輸出是 4 和 8，但實際結果卻沒有任何輸出。

原因分析

問題在于 of 操作符的用法。of 操作符將輸入參數作為一個整體發射，而不是將數組中的每個元素分別發射。因此，filter 和 map 操作符接收到的 item 是整個數組 [1, 2, 3, 4, 5]，而不是數組中的單個數字。 item % 2 === 0 的判斷對整個數組無效，導致 filter 過濾掉所有內容。

解決方案：使用 from 操作符

為了解決這個問題，應該使用 from 操作符代替 of 操作符。from 操作符會將數組拆分成單個元素，逐個發射到 Observable 中。修改后的代碼如下：

import { from } from 'rxjs'; import { map, filter } from 'rxjs/operators';  const source$ = from([1, 2, 3, 4, 5]); source$.pipe(   filter(item => item % 2 === 0),   map(num => num * 2) ).subscribe(value => console.log(value));

現在，filter 和 map 操作符將正確地處理每個數字，最終輸出 4 和 8。 這演示了選擇正確的 RxJS 操作符對于正確處理數據流的重要性。