為什麼使用 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發射的是可迭代對像中的每個元素。

以上是為什麼使用 RxJS 處理流元素時沒有輸出？如何正確使用 of 和 from 操作符？的詳細內容。更多資訊請關注PHP中文網其他相關文章！