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"]