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

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

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

問題：偶數(shù)乘以二操作失效

假設(shè)我們需要處理一個數(shù)字?jǐn)?shù)組，篩選出偶數(shù)并將其乘以 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));

預(yù)期輸出是 4 和 8，但實(shí)際結(jié)果卻沒有任何輸出。

原因分析

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

解決方案：使用 from 操作符

為了解決這個問題，應(yīng)該使用 from 操作符代替 of 操作符。from 操作符會將數(shù)組拆分成單個元素，逐個發(fā)射到 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));

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