用可視化來理解switchMap, concatMap, flatMap,exhaustMap

Rxjs中有三種操做符都是用做從主流轉換到從流上的，它們分別是switchMap、concatMap、flatMap和exhaustMap 。RxViz能夠將流進行可視化，咱們就利用RxViz來一探這四種操做符的異同。

1、相同點

整體上來講，四個操做符的做用都是：存在一個主流和一個從流，主流上每發射一次數據都會觸發從流開始發射數據，最後數據都被打平到同一個輸出流中，以下圖所示。

2、不一樣點

如下四個例子，主流是每500毫秒發射一次數據，從流是每200毫秒發射數據，每次主流發射數據都會觸發從流。

1. switchMap

• 代碼：

var mainstream = Rx.Observable.interval(500);
mainstream.switchMap((x) => Rx.Observable.interval(200).take(5));

• 可視化演示：

• 分析：

從結果能夠看到，用switchMap的時候，從流每次只能發射2個數據0-1，這是由於主流每發射一次觸發了從流的發射，可是在從流發射的過程當中，若是主流又一次發射了數據，switchMap會截斷上一次的從流，響應本次的主流，從而開啓新的一段的從流發射。

2. concatMap

• 代碼：

var mainstream= Rx.Observable.interval(500);
mainstream.concatMap((x) => Rx.Observable.interval(200).take(5));

• 可視化演示：

• 分析：

從結果能夠看到，用concatMap的時候，雖然在從流尚未結束的時候，主流還在發射數據，主流會先把發射的數據緩存起來，等從流結束後當即響應主流的數據從而引起新一輪的從流發射，這有些相似與js的消息隊列機制。因此咱們看到它的輸出流響應是連續的。

3. flatMap / mergeMap

代碼：

var mainstream= Rx.Observable.interval(500);
mainstream.flatMap((x) => Rx.Observable.interval(200).take(5));

• 可視化演示：

分析：
從結果能夠看出來，flatMap/mergeMap會即便響應主流中發射的每個數據，它既不會忽略也不會緩存，這就致使主流中數據對應的從流產生了疊加。

4. exhaustMap

• 代碼：

var mainstream= Rx.Observable.interval(500);
mainstream.exhaustMap((x) => Rx.Observable.interval(200).take(5));

• 可視化演示：

• 分析：

從結果能夠看出，exhaustMap在從流尚未結束的時候若是主流仍然有數據在發射，它會忽略此時主流發射的數據，而在從流結束之後纔會去響應主流中發射的數據。