在 Rxjs中，Observable 是一個可供訂閱的物件。當一個 Observable 被 subscribe （訂閱）後，直到這個 Observable 發出 complete 之前，訂閱這個 Observable的 Observer 都會收到 Observable 發出的值。
因為 Observable 會在特定的條件下，不斷的發出值，因此就會形成一個資料流。可以把資料流想像成水流，而 發出值的 Observable 就是水的源頭。
而當資料流產生後，我們可能還會對資料的值一些處理，最將處理後的值發給訂閱這個 Observable 的 Observer。這時就可以使用 pipe。可以把 pipel 想像成一個水管。
打個比方，源 Observable 就像 水龍頭，而 pipe 像蓮蓬頭。當水龍頭打開後，我們（Observer）最後看到的水，會是蓮蓬頭導出的水。
所有的運算子，其實都是一個Observable。以 map為例，當project return 值後，map 會發出project return 的值；pipe中的函式會像接水管一樣，下一個Operator訂閱上一個Operator(Observable)。
訂閱的動作，可以透過 Subscriber 完成。它是一個內部使用的類別，實現了 Observer界面，並且繼承 Subscription。內部的 Observer 界面，會被轉化為 Subscriber。 Subscriber 實現了「管理」及「取消」多個Observable 訂閱的能力 。因此，在 pipe中，當 其中的某個運算子要結束掉整個 pipe的時候，可以通過 Subscriber 的 unsubscribe() 方法，取消整個管線的訂閱。
\n引用官方說明：
\n\n\nA Pipeable Operator is a function that takes an Observable as its input and returns another Observable. It is a pure operation: the previous Observable stays unmodified.
\n
函式： map(project: Function, thisArg: any): Observable
map operator是很好懂的一個運算子。它的 project function 會接受上一個運算子發出的值，並且經過處理後，回傳處理後的值。
範例：
\n// RxJS v6+\nimport { from } from 'rxjs';\nimport { map } from 'rxjs/operators';\n\n// 发出 (1,2,3,4,5)\nconst source = from([1, 2, 3, 4, 5]);\n// 每个数字加10\nconst example = source.pipe(map(val => val + 10));\n// 输出: 11,12,13,14,15\nconst subscribe = example.subscribe(val => console.log(val));mergeMap: mergeMap(project: function: Observable, resultSelector: function: any, concurrent: number): Observable
switchMap: switchMap(project: function: Observable, resultSelector: function(outerValue, innerValue, outerIndex, innerIndex): any): Observable
很多時候，我們會需要回傳一個 Observable，並且自已處理 Observable 的發出值。最常見的範例就是在接到值後，面發起一個 http請求。此時，return的值是一個 Observable。
mergeMap 跟 switchMap 事實上也沒有什麼魔法。它就是 project function 直接回傳一個 Observable，而下一個運算子取得的值，是由這個回傳的Observable發出的。
\n\n\n
mergeMap、switchMap跟map的差別，在於projectfunction。 map回傳的是Observable內的值；mergeMap/ switchMap回傳的是一個函式。
這就是 mregeMap 和 switchMap 的不同處了。因為它們的project function 回傳值是 Observable，我們不會知道它會什麼時候發出值、什麼時候結束。
mergeMap 跟 switchMap 都有內部的 Observable，下一個運算子接收的值，是由這個 Observable 發出的值。而兩者的差別只在，使用switchMap的時候，當新的observable進來了，上一個 Observable會直接 complete。而 mergeMap不會complete上一個 Observable。
當Observable被發出後，該Observable之後再發出的任何訊息，都不會再被訂閱者接收（在pipe中就是下一個運算子）。
\nswitchMap一次只會有一個訂閱中的observable。而mergeMap會一次管理多個Observable訂閱。
因此，使用switchMap可以防止潛在可能memory leak的問題。大多數的時候，使用switchMap是比較安全的。然而，有些情況下，可能還是適合使用 mergeMap。這就要看使用情境跟經驗了。
這是從rxjs官網看到，覺得比較有趣的例子。
\n\n// RxJS v6+\nimport { interval, fromEvent, merge, empty } from 'rxjs';\nimport { switchMap, scan, takeWhile, startWith, mapTo } from 'rxjs/operators';\n\nconst countdownSeconds = 10;\nconst setHTML = id => val => (document.getElementById(id).innerHTML = val);\nconst pauseButton = document.getElementById('pause');\nconst resumeButton = document.getElementById('resume');\nconst interval$ = interval(1000).pipe(mapTo(-1));\n\nconst pause$ = fromEvent(pauseButton, 'click').pipe(mapTo(false));\nconst resume$ = fromEvent(resumeButton, 'click').pipe(mapTo(true));\n\nconst timer$ = merge(pause$, resume$)\n .pipe(\n startWith(true),\n switchMap(val => (val ? interval$ : empty())),\n tap(val => console.log(val)),\n scan((acc, curr) => (curr ? curr + acc : acc), countdownSeconds),\n takeWhile(v => v >= 0)\n )\n .subscribe(setHTML('remaining'));首先，原 Observable是 pause和 resume兩個 event 的 merge。\n因此，timer$ 要馬會接收 pause button 的 click事件，回傳 true\n要馬會接收 resume button 的 click事件，回傳 false。
接著，switchMap 會接收 merge 發出的 true 或 false 值，並判斷要回傳 interval$ observable 或是 empty。
而 interval$這個 observable會每隔一秒發出 -1 。
這裡因為使用 switchMap，所以當收到新的 click事件，前一個 回傳的 observable會被 結束掉，因此不會有潛在的 memory leak風險。
接下來，scan會將收到的值累加，並發出值給下一個運算子。
最後，takeWhile 會在 v > 0 條件成立時，發出接收到的值。
這樣整個 pipe做到的效果，就是一個 監聽 按鈕有沒有被按，並且做對應動作的倒計時器了。
\n 在switchMap 後面 加上一個 tap/do 運算子，log一下接收的值，對switchMap會更了解。當你按下 pause時，switchMap會對內部的Obesrvable送出complete，並且發出一個新的Observable，在這裡是 empty。因此，\n前一個interval$ 的 Obsevable因為已經complete，不會再發出值了，達成停止counting 的效果。
https://rxjs-cn.github.io/learn-rxjs-operators/operators/transformation/switchMap.html
\nhttps://rxjs-cn.github.io/learn-rxjs-operators/operators/transformation/mergeMap.html
","frontmatter":{"title":"RXJS運算子-mergeMap、switchMap","date":"May 28, 2020","description":"rxjs剛開始學習的一些筆記","tags":["rxjs","archive"],"template":"post"}}},"pageContext":{"slug":"/2020-05-28/","previous":{"node":{"fields":{"slug":"/2020-05-26-go-starter/"},"frontmatter":{"date":"26 May, 2020","title":"初探 Golang","tags":["go"]}}},"next":{"node":{"fields":{"slug":"/2020-05-31-rxjs-src/Rxjs/"},"frontmatter":{"date":"30 May, 2020","title":"rxjs source trace","tags":["achieve","javascript"]}}}}},"staticQueryHashes":["2841359383","3810545343","916993862"]}