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'); }
  });