RxJS學習之路五（Operators（二））

此次介紹剩下的operators，這些操做符不少都是用來處理各個observable之間的相互關係的，在實際應用中能夠解決不少複雜的異步交互邏輯的問題。這部分操做符的理解也會較爲複雜。

startWith

startWith是在接收的observable前添加一個元素，和concat的區別是不能添加observable。

interval(1000).pipe(
      startWith(666)
    ).subscribe(res => console.log(res))
    
    source :     ----0----1----2----3--...
                startWith(0)
    startWith: (0)----0----1----2----3--...
複製代碼

merge

merge是用來合併observable的，它和concat也有明顯的區別，concat是合併以後依次執行，merge合併後是同時執行

merge(
      interval(1000),
      interval(500)
    ).subscribe(res => console.log(res))
    
    
    source1: ----0----1----2---
    source2: --0--1--2--3--4--5---
            merge()
    merge: --0--(01)--2--(13)--4--(24)--5--
複製代碼

能夠看出，merge後的兩個observable是同步運行的，觸發哪一個輸出哪一個，這種類型的operator一般用於須要同時監聽多個操做，輸出結果相似的狀況。 好比播放器同時監聽暫停和中止按鈕，瀑布流同時監聽滾動條事件和點擊‘更多’按鈕的事件。

combineLatest

merge有點像or(||)操做，任意一個有值均可以輸出。而combineLatest則是有點像and（&&）操做符

combineLatest是取得各個observable 最後發出的值，再輸出成一個值，以下例子：

combineLatest(
      interval(500),
      interval(300)
    ).subscribe(([source1, source2]) => {
      console.log(source1 + source2);
    });
    
source1 : ----0----1----2----3
source2 : --0--1--2--3--4--5--6--

    combineLatest(source1 + source2);

combineLatest : ----01--23-4--(56)--7|
複製代碼

這個看起來有點抽象，初次接觸很難理解這個輸出的緣由。

咱們須要理解它的運做原理：當任意一個observable觸發一個值時，這個值將會與另外其餘的observable的現有值結合起來發送出去，當前的值會替換掉以前的值。

例子中的觸發順序：

1. source2觸發0，source1無值，不觸發；
2. source1觸發0，source2爲0，觸發0+0=0；
3. source2觸發1，source1爲0，觸發1+0=1；
4. source2觸發2，source1爲0，觸發2+0=2；
5. source1觸發1，source2爲2，觸發1+2=3； .......

以此類推

這個operator很是經常使用，在監聽多個相關聯的值的時候會用到。 例如兩個obervable爲總數據（dataSet）和篩選因子(fliterStatus)，其中任意一個發生變化都須要從新處理數據渲染頁面。則能夠這樣處理。

combineLatest(
      $dataSet,
      $fliterStatus
    ).subscribe(callback)
複製代碼

zip

zip也是合併observable的操做符，combineLatest的區別是zip爲對應了index的合併打包，source1的第一個元素只和source2的第一個元素合併，source1的第二個元素只和source2的第二個元素合併。

zip(
      interval(500),
      interval(300)
    ).subscribe(([source1, source2]) => {
      console.log(source1 + source2);
    });
    
    
source1 : ----0----1----2----3
source2 : --0--1--2--3--4--5--6--

    zip(source1 + source2);

zip : ----0----2----4----6----8--
複製代碼

zip常常用來把發送事件和時間間隔結合起來，例如實現每隔1s發送一條數據：

zip(interval(1000), $sendInfo).subscribe(callback)
複製代碼

withLatestFrom

withLatestFrom和combineLatest的觸發方式幾乎同樣，惟一的區別就是withLatestFrom具備主從關係，只有主observable觸發時才輸出。

interval(1000).pipe(
      withLatestFrom(interval(500), (x, y) => x + y)
    ).subscribe(res => console.log(res))
    
source1 : ----0----1----2----3
source2 : --0--1--2--3--4--5--6--

    withLatestFrom(source1 + source2);

withLatestFrom : ----1----4----7----6----9--
    
複製代碼

如例子所示，僅在source1觸發的時候纔會去檢查source2的當前值，而後再進行處理輸出。

這種操做能夠用在後臺數據不斷更新咱們也不斷接收，但僅在點擊事件發生時纔在某處進行展現。

scan

scan和數組中的reduce方法比較類似，是針對於obervable的累加器

interval(1000).pipe(
      scan((origin, next) => origin + next)
    ).subscribe(res => console.log(res))
    
source1 : --0--1--2--3--4--5--6--

    scan((origin, next) => origin + next)

scan : --0--1--3--6--10--
複製代碼

scan還有第三個參數爲index下標

buffer

buffer是一個系列的操做符：

• buffer
• bufferCount
• bufferTime
• bufferToggle
• bufferWhen

buffer是用一個observable將目標observable進行緩存輸出

以下例子：

interval(300).pipe(
      buffer(interval(1000))
    ).subscribe(res => console.log(res))
    
source1 : --0--1--2--3--4--5--6--
source2 : ------0------1----
     source1.buffer(source2)
     
buffer: ------(012)------(345)---
複製代碼

bufferTime是用時間來緩存

interval(300).pipe(
      bufferTime(1000)
    ).subscribe(res => console.log(res))
 source1 : --0--1--2--3--4--5--6--
     source1.bufferTime(1000)
     
buffer: ------(012)------(345)---   

複製代碼

bufferCount是用數量來緩存

interval(300).pipe(
      bufferCount(2)
    ).subscribe(res => console.log(res))
    
 source1 : --0--1--2--3--4--5--6--
     source1.bufferCount(2)
 buffer: ----(01)----(23)--- 
複製代碼

另外兩個不多使用，bufferWhen傳入一個function來決定什麼時候關閉、發出、重置緩存。bufferToggle，第一個參數爲一個observable來規定開啓緩存期，第二個參數爲函數返回緩存時間。

delay 和 delayWhen

delay能夠延遲observable第一次發送元素的時間點，delayWhen也是延遲發送，可是它是傳入一個返回observable的回調函數針對每個元素觸發延遲.

interval(300).pipe(
      delay(300)
    ).subscribe(res => console.log(res))
    
source1 : --0--1--2--3--4--5--6--
            delay(300)
delay     ----0--1--2--3--4--5-



    interval(300).pipe(
      delayWhen(x => empty().pipe(delay(100 * x))
    ).subscribe(res => console.log(res))
    
 source1 : --0--1--2--3--4--5--6--
    delayWhen(x => empty().pipe(delay(100 * x))
delay     --0---1----2-----3------4--   

複製代碼

delayWhen的回調參數x爲當前傳入的元素。

這兩個操做符一般用來進行一些ui交互的延遲操做。

throttleTime 和 debounceTime

debounceTime是很是經常使用的一個用來處理防抖的操做符，它能夠將傳入的元素緩存規定的時間，若時間內有新的元素進來，則刷新時間和元素，待到時間結束，發出元素。

interval(300).pipe(
      take(5),
      debounceTime(1000)
    ).subscribe(res => console.log(res))

 source1 : --0--1--2--3--4|
        debounceTime(1000)
debounce:  --------------4|
    
複製代碼

debounceTime經常使用於輸入框的聯想功能對後端發送請求的防抖，也用於異步校驗器的防抖優化。

throttleTime和debounce相似，在收到第一個元素時，馬上送出，可是會在規定時間內不接收任何元素。

interval(300).pipe(
      take(5),
      throttleTime(1000)
    ).subscribe(res => console.log(res))

 source1 : --0--1--2--3--4|
        throttleTime（1000）
debounce:  --0----------4|
複製代碼

throttleTime經常使用於防止重複向後端發送請求的狀況，例以下載按鈕，點擊一次後進入沉默狀態一段時間，防止屢次下載。

distinct

distinct是一個過濾的操做符，能夠幫咱們把以前出現過的元素過濾掉

of(1, 2, 3, 1, 2).pipe(
      distinct()
    ).subscribe(res => console.log(res))
    // 輸出123, 12被過濾掉
複製代碼

distinct有兩個參數，第一個參數爲一個回調函數，能夠用來進行篩選條件的判斷，第二個參數爲一個observable，用來觸發什麼時候清除記錄的緩存。

distinctUntilChanged

distinctUntilChanged和distinct相似，也是過濾相同元素，不一樣的是distinctUntilChanged只會和最後一個元素做比較，只要相鄰的兩個不相同就能夠正常發送

of(1, 2, 3, 3, 1, 2).pipe(
      distinct()
    ).subscribe(res => console.log(res))
    // 輸出12312, 3被過濾掉

複製代碼

小結

RxJS的操做符還有很多，不過其餘都不多在平常中使用到。這些操做符靈活使用可讓observable之間的交互變得更加容易和直觀。