Rxjs学习笔记三

合并类操作符

• concat：首尾相连

类似于数组中的concat方法：1，从第一个Observable对象获取数据，把数据传给下游；2，当第一个Observable对象complete之后，concat就会去subscribe第二个Observable对象获取数据，把数据同样传给下游； 3， 以此类推，知道最后一个Observable完结之后，concat产生的Observable也就完结了

var a=Rx.Observable.of(1,2)

var b=Rx.Observable.of(3,4)

a.concat(b).subscribe(x=>console.log(x))

//1,2,3,4
           

因为concat开始从下一个Observable对象抽取数据只能在前一个Observable对象完结后，所以参与到这个concat之中的对象应该都能完结。

• merge:先到先得快速通过

1，数据汇流

var a=Rx.Observable.timer(0,1000).map(x=>x+'A')
var b=Rx.Observable.timer(500,1000).map(x=>x+'B')

// 0A,0B,1A,1B,2A,2B,3A,3B....
           

2, merge的应用场景

我们知道fromEvent可以从网页中获取事件，但是fromEvent一次稚嫩供一个DOM元素中获取一种类型的事件，比如，我们关心某个元素的click事件，同时也关心这个元素上的touchend事件，这个时候就要借助merge的力量了

const click$=Rx.Observable.fromEvent(element,"click")
const touch$=Rx.Observable.fromEvent(element,"touchend")
Rx.Observable.merge(click$,touch$).subscribe(eventHandler)
           

• zip：拉链式组合

1, 一对一合并

在产生数据的形式上，zip和concat，merge很不同，concat，merge会保留原有的数据传给下游，但是zip会把上游的数据转化为数组形式，每一个上游Observable贡献的数据会在对应数组中占一席之地

在zip执行的时候，他会立刻订阅所有的上游Observable，然后开始合并数据

var a=Rx.Observable.of(1,2,3)
var b=Rx.Observable.of(4,5,6)
Rx.Observable.zip(a,b).subscribe(x=>console.log(x))

//[1,4],[2,5],[3,6]

var a=Rx.Observable.of(3)
var b=Rx.Observable.of(6)

Rx.Observable.zip(a,b).subscribe(([a,b])=>console.log(a+"--"+b))
//  3--6
           

2, 多个数据流

多个数据流的时候，吐出数据最少的上游Observable决定了zip产生的数据个数

• combineLast:合并最后一个数据

var a=Rx.Observable.timer(500,1000)
var b=Rx.Observable.of("a")
Rx.Observable.combineLatest(a,b).subscribe(x=>console.log(x))

//[1,"a"],[1,"a"],[2,"a"]......无限次数
           

• race:胜者通吃

​​​​​​​多个Observable对象在一起，看谁先产生数据，第一个吐出数据的Observable就是胜者，其余输入的Observable对象则会被退订而抛弃

• forkJoin

​​​​​​​接受多个Observable对象作为参数，forkJoin产生的Observable对象只会产生一个数据，因为他会等待所有参数Observable对象的最后一个数据，所以说，forkjoin就是RXJS界的Promise.all,Promise.等待所有输入的Promise对象合并之后把结果合并

var a=Rx.Observable.interval(1000).map(x=>x+'a').take(1)
var b=Rx.Observable.interval(1000).map(x=>x+"b").take(3)
Rx.Observable.forkJoin(a,b).subscribe(x=>console.log(x))

// ["0a", "2b"]