【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
在源 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