【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