【RxJs】每天学习一点操作符 merge、mergeAll、mergeMap、mergeMapTo、mergeScan

merge

官方解释：

merge(observables: ...ObservableInput, concurrent: number, scheduler: Scheduler): Observable

创建一个输出 Observable ，它可以同时发出每个给定的输入 Observable 中值。、

测试代码：

const sourceOne$ = of(1, 2, 3);
   const sourceTwo$ = of(5, 6);
   const sourceThree$ = of(7, 8);
   sourceOne$
       .pipe(
         merge(sourceTwo$, sourceThree$)
       )
       .subscribe(val => {
         console.log(val);
       });
//输出
1
2
3
5
6
7
8


const button = document.querySelector('button');
    const click$ = fromEvent(button, 'click');
    const timer$ = interval(1000);
    click$.pipe(
      merge(timer$)
    ).subscribe(x => console.log(x));
0
1
2
//点击按钮
MouseEvent {isTrusted: true, screenX: 41, screenY: 254, clientX: 41, clientY: 143, …}
3
4
5
//点击按钮
MouseEvent {isTrusted: true, screenX: 41, screenY: 254, clientX: 41, clientY: 143, …}
6
7

弹珠图：

merge 订阅每个给定的输入 Observable (作为参数)，将所有输入 Observables 的所有值发送(不进行任何转换)到输出 Observable 。所有的输入 Observable 都完成了，输出 Observable 才 能完成。任何由输入 Observable 发出的错误都会立即在输出 Observalbe 上发出。

将多个Observable的值输出到一个observable。

 

mergeAll

官方解释：

mergeAll(concurrent: number): Observable

将高阶 Observable 转换成一阶 Observable ，一阶 Observable 会同时发出在内部 Observables 上发出的所有值。

测试代码：

    const button = document.querySelector('button');
    const click$ = fromEvent(button, 'click');
    const interval$ = interval(1000);
    click$.pipe(
      map(() => interval$),
      mergeAll()
      ).subscribe(num => console.log(num));
//点击button
0
1
//点击button
0
2
1
3
2
4
//点击button
0
3
5
。。。

弹珠图：

mergeMap

官方解释：

mergeMap(project: function(value: T, ?index: number): ObservableInput, resultSelector: function(outerValue: T, innerValue: I, outerIndex: number, innerIndex: number): any, concurrent: number): Observable

将每个源值投射成 Observable ，该 Observable 会合并到输出 Observable 中。

测试代码：

const letters$ = of('a', 'b', 'c');
    letters$.pipe(
      mergeMap(x =>
        interval(1000).pipe(
          map(i => x + i)
        )
      )
    ).subscribe(x => console.log(x));
//输出
a0
b0
c0
a1
b1
c1
...

弹珠图

将每个值映射成 Observable ，然后使用 mergeAll 打平所有的内部 Observables 。

可以看作是map与mergeAll的结合。

 

mergeMapTo:

官方解释：

mergeMapTo(innerObservable: ObservableInput, resultSelector: function(outerValue: T, innerValue: I, outerIndex: number, innerIndex: number): any, concurrent: number): Observable

将每个源值投射成同一个 Observable ，该 Observable 会多次合并到输出 Observable 中。

测试代码：

const button = document.querySelector('button');
    const click$ = fromEvent(button, 'click');
    click$.pipe(
      mergeMapTo(interval(1000))
    ).subscribe(x => console.log(x));


//点击button
0
 1
//点击button
 0
2
1
3
2
4
//点击button
0
3
5

 const sourceOne$ = of(1, 2, 3);
    const sourceTwo$ = of(5, 6);
    sourceOne$
        .pipe(
          mergeMapTo(sourceTwo$)
        )
        .subscribe(val => {
          console.log(val);
        });
//输出
5
6
5
6
5
6

弹珠图：

将每个源值映射成给定的 Observable ：innerObservable ，而无论源值是什么，然后 将这些结果 Observables 合并到单个的 Observable ，也就是输出 Observable 。

可以看作mergeAll和mapTo的结合

 

mergeScan

官方解释：

mergeScan(accumulator: function(acc: R, value: T): Observable<R>, seed: *, concurrent: number): Observable<R>

在源 Observable 上应用 accumulator 函数，其中 accumulator 函数本身返回 Observable ，然后每个返回的中间 Observable 会被合并到输出 Observable 中。

测试代码

const button = document.querySelector('button');
    const click$ = fromEvent(button, 'click');
    const seed = 1; // 初始的累加值。
    const fn = (acc, one) => of(acc * one); // 在每个源值上调用的累加器函数。
    click$
    .pipe(
      mapTo(2),
      mergeScan(fn, seed)
    ).subscribe(x => console.log(x));
//点击button
2
//点击button
4
//点击button
8
//点击button
16

 

参考：

https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-mergeScan