RxJS合併操做符：concat、merge、forkJoin、zip、 combineLatest 、concatAll、mergeAll、switchAll

forkJoin

用forkJoin合併的流，會在每一個被合併的流都發出結束信號時發射一次也是惟一一次數據。 即全部的流都complete或者error時纔會發射一次數據。

zip

zip工做原理以下，當每一個傳入zip的流都發射完畢第一次數據時，zip將這些數據合併爲數組併發射出去；當這些流都發射完第二次數據時，zip再次將它們合併爲數組併發射。以此類推直到其中某個流發出結束信號，整個被合併後的流結束，再也不發射數據。

zip和forkJoin的區別在於，forkJoin僅會合並各個子流最後發射的一次數據，觸發一次回調；zip會等待每一個子流都發射完一次數據而後合併發射，以後繼續等待，直到其中某個流結束（由於此時不能使合併的數據包含每一個子流的數據）。

combineLatest

combineLatest與zip很類似，combineLatest一開始也會等待每一個子流都發射完一次數據，可是在合併時，若是子流1在等待其餘流發射數據期間又發射了新數據，則使用子流最新發射的數據進行合併，以後每當有某個流發射新數據，再也不等待其餘流同步發射數據，而是使用其餘流以前的最近一次數據進行合併。

concat

按照順序，前一個 observable 完成（complete）了再訂閱下一個 observable 併發出值 。即前一個observable發出complete信號後，纔會訂閱下一個observable。

merge

merge 把多個 observable 同時到處理， 當多個 observable 其中一個被觸發時均可以被處理，這很經常使用在一個以上的按鈕具備部分相同的行爲。

例如一個影片播放器有兩個按鈕，一個是暫停(II)，另外一個是結束播放(口)。這兩個按鈕都具備相同的行爲就是影片會被中止，只是結束播放會讓影片回到 00 秒，這時咱們就能夠把這兩個按鈕的事件 merge 起來處理影片暫停這件事。

concatAll、mergeAll、switchAll屬於高階 Observable 的 操做符。都是用來打平Observable的。

所謂的 Higher Order Observable 就是指一個 Observable 發送出的元素仍是一個 Observable，就像是二維數組同樣，一個數組中的每一個元素仍是數組。

若是用TypeScript中的泛型來表達就像是Observable<Observable<T>>，一般咱們須要的是第二層 Observable 送出的元素，因此咱們但願能夠把二維的 Observable 改爲一維的，像是下面這樣 Observable<Observable<T>> => Observable<T>

concatAll

處理完前一個 observable 纔會在處理下一個 observable。依次按順序執行一個個observable 。

switchAll

新的 observable 送出後直接處理新的 observable 無論前一個 observable 是否完成，每當有新的 observable 送出就會直接把舊的 observable 退訂(unsubscribe)，永遠只處理最新的 observable!

mergeAll

而且可以同時並行處理全部的 observable 。

看下面的例子，咱們能夠切換爲 concatAll，mergeAll，switchAll 體驗區別

const example = fromEvent(document.body, 'click')
    .pipe(
      // map 把送出的event事件轉換爲 Observable
      // 每次點擊送出一個新的 Observable
      map(e => {
        // console.log(e);
        // 生成新的 Observable，點擊一次輸出0，1，2
        return interval(1000).pipe(take(3))
      }),
     
     // concatAll 好比快速點擊三次，會按順序輸出三次0,1,2
     // switchAll 快速點擊，只輸出一次0,1,2，也就是說老的捨去只保留最新的
     // mergeAll 快速點擊，會重複的輸出屢次0，1等。點擊越多下，最後送出的頻率就會越快。不會捨去，每次都會輸出
      switchAll()
    );


  example.subscribe({
    next: (value) => { console.log(value); },
    error: (err)  => { console.log('Error: ' + err); },
    complete: ()  => { console.log('complete'); }
  });