The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

釐清幾個超容易混淆又很常用的 RxJS 運算子 (Operators)

📅 2018/09/06 20:56 📁 Angular

撰寫 Angular 的開發者，目前應該是最自然接觸 RxJS 的了。每當有機會要用上的時候，就會在這一百多個 RxJS 運算子之間徘迴打轉，因為實在太多相似的 API 可以用，以至於經常鬼打牆寫不出來。今天，我就整理幾個不但常用，命名還很像，更容易用錯的 RxJS 運算子。

記憶法分享

在這麼多種不同的 RxJS 運算子之間，透過死背的方式，是一定行不通的。我個人的理解方式，首先是理解「英文」所代表的意思，然後再進行「聯想」，最後再去推算出每個運算子所代表的意思。

關鍵字說明

關鍵字 字義說明
scan 顧名思義【掃描】就是將傳入 RxJS 運算子的事件資料，一筆一筆處理過一遍，每次處理的過程都會累加，並且處理一筆就 emit 一筆新的事件資料出來。
map 顧名思義【對應】就是將一筆傳入的資料，對應到另一種格式的資料，通常用來轉換資料之用。
concat 顧名思義【串接】就是將一筆一筆的資料串接在一起，通常是把多個 Observable 物件串接成一個新的 Observable 物件。
switch 顧名思義【交換】就是將一筆資料 "交換成" 另一種資料，當連續交換的事件發生時，還沒交換的資料就會被放棄。
merge 顧名思義【合併】就是將多筆資料合併成一筆，通常是將多個 Observable 物件合併成一個 Observable 物件。
flat 其用途跟 merge 完全一樣，在語意上，通常代表把多個 Observable 物件「壓平」成一個 Observable 物件。
exhaust 顧名思義【耗盡】就是要把原本 Observable 物件送出的資料都跑完，才能繼續跑下一個。
zip 這個單字有【拉鍊】的意思，你要發揮一點想像力，假設衣服的兩端，拉鍊拉起來之後，每一節都會平整的被湊在一起。
combine 顧名思義【組合】就是將多筆資料組合在一起。
forkJoin 這裡的 fork 是【走進岔路】的意思，Join 則是【從不同的岔路合併回來】。通常意思代表多個 Observable 物件同時執行，但全部執行完之後，才會 emit 所有資料，等大家從岔路走回來的感覺。

對上述關鍵字有點理解後，我們再來看另外幾個關鍵字：

關鍵字 字義說明
xxxAll 顧名思義【全部】就是將所有傳入的 Observabe 物件，全部一起處理。
xxxLatest 顧名思義【最新的】就是取得最新資料的意思。
xxxTo 這裡的 To 有【表示結果】的意思，也就是直接把特定結果 emit 出去。
xxxMap 這裡的 Map 有【對應】的意思，但是在 RxJS 的領域中，通常代表著在 Operator 中會對應到另一個不同的 Observable 物件。
xxxMapTo 這裡就是 Map + To 的意思，但是在 RxJS 的領域中，通常代表著在 Operator 中會對應到另一個自行指定的 Observable 物件。
xxxScan 顧名思義【掃描】就是將傳入 RxJS 運算子的事件資料，一筆一筆處理過一遍，每次處理的過程都會累加，並且處理一筆就 emit 一筆新的事件資料出來。

了解這些關鍵字的意思後，接下來就是苦工了。那就是文件認真看，範例程式看懂，看不懂就看原始碼，原始碼看不懂就看單元測試程式，再看不懂就是到 FB 社團或討論區發問！

常見 RxJS 運算子 (Operators) 簡表 (新版文件)

關鍵字 xxxAll xxxLatest xxxTo xxxMap xxxMapTo xxxScan
scan * * * * * *
map * * mapTo * * *
concat concatAll * * concatMap concatMapTo *
switch switchAll * * switchMap switchMapTo *
merge mergeAll * * mergeMap mergeMapTo mergeScan
flat * * * flatMap * *
exhaust * * * exhaustMap * *
zip zipAll * * * * *
combine combineAll combineLatest * * * *
forkJoin * * * * * *

常見 RxJS 運算子 (Operators) 簡表 (舊版文件)

關鍵字 xxxAll xxxLatest xxxTo xxxMap xxxMapTo xxxScan
scan * * * * * *
map * * mapTo * * *
concat concatAll * * concatMap concatMapTo *
switch switchAll * * switchMap switchMapTo *
merge mergeAll * * mergeMap mergeMapTo mergeScan
flat * * * flatMap * *
exhaust * * * exhaustMap * *
zip zipAll * * * * *
combine combineAll combineLatest * * * *
forkJoin * * * * * *

常見 RxJS 運算子 (Operators) 簡表 (原始碼)

關鍵字 xxxAll xxxLatest xxxTo xxxMap xxxMapTo xxxScan
scan * * * * * *
map * * mapTo * * *
concat concatAll * * concatMap concatMapTo *
switch switchAll * * switchMap switchMapTo *
merge mergeAll * * mergeMap mergeMapTo mergeScan
flat * * * flatMap * *
exhaust * * * exhaustMap * *
zip zipAll * * * * *
combine combineAll combineLatest * * * *
forkJoin * * * * * *

常見 RxJS 運算子 (Operators) 簡表 (單元測試)

關鍵字 xxxAll xxxLatest xxxTo xxxMap xxxMapTo xxxScan
scan * * * * * *
map * * mapTo * * *
concat concatAll * * concatMap concatMapTo *
switch switchAll * * switchMap switchMapTo *
merge mergeAll * * mergeMap mergeMapTo mergeScan
flat * * * flatMap * *
exhaust * * * exhaustMap * *
zip zipAll * * * * *
combine combineAll combineLatest * * * *
forkJoin * * * * * *

有了上面四張大表，以後要是真的忘記 RxJS 運算子的用法，就可以很快的查到相關文件，或是單元測試文件了！

相關連結

留言評論