為什么使用 RxJS 處理流元素時沒有輸出？如何正確使用 of 和 from 操作符？

RxJS 流處理：of 與 from 操作符的正確使用

在使用 RxJS 處理數據流時，正確選擇操作符至關重要。本文探討一個常見的 RxJS 流處理問題：使用 of 和 from 操作符處理數組元素時，輸出結果不符合預期的情況。

問題描述：

目標：從一個包含數字的數組中過濾出偶數，并將偶數乘以 2。

錯誤代碼：

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

運行這段代碼后，沒有任何輸出。這是因為 of 操作符將整個數組 [1, 2, 3, 4, 5] 作為一個單一元素發射，而不是將數組中的每個元素分別發射。因此，filter 和 map 操作符接收到的 item 是整個數組，導致條件判斷和乘法運算結果不符合預期。

解決方案：

為了將數組中的每個元素分別發射，需要使用 from 操作符。from 操作符可以將數組、字符串等可迭代對象轉換成一個 Observable，該 Observable 會依次發射對象中的每個元素。

正確代碼：

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

這段代碼中，from([1, 2, 3, 4, 5]) 將數組轉換成一個 Observable，該 Observable 會依次發射 1, 2, 3, 4, 5。filter 操作符會過濾出偶數 2 和 4，map 操作符會將它們分別乘以 2，最終輸出 4 和 8。

通過這個例子，我們可以清晰地看到 of 和 from 操作符在處理數組時的區別，以及如何選擇正確的操作符來實現預期的流處理結果。 記住，of 發射的是單個值，而 from 發射的是可迭代對象中的每個元素。