RxJS學習之路四（Operators（1））

什麼是Operators

Operators是用來操做處理Observable 的一個函數，對單個或多個Observable進行必定處理後返回新的Observable。

描述各類Operators的功能時咱們用Marble diagrams來可視化的表達，不瞭解這種方式的同窗能夠參考IT邦的Marble diagrams的詳細介紹。

map 和 filter

map,filter和數組的map相似,傳入一個callback，參數的意義也同樣。

interval(1000).pipe(
      map(t => t =  t + 1),
      filter(t => !!(t % 2)) // 篩選出來奇數
    ).subscribe(res => console.log(res))
    
    //Marble diagrams
    origin: -----0-----1-----2-----3--...
            map(x => x + 1)
    map:    -----1-----2-----3-----4--...
             filter(t => !!(t % 2))
    filter: -----1-----------3--------...
    
複製代碼

mapTo

mapTo能夠把傳進來的值改爲一個固定的值

interval(1000).pipe(
      mapTo(2)
    ).subscribe(res => console.log(res))
    
    //Marble diagrams
    origin: -----0-----1-----2-----3--...
            mapTo(2)
    mapTo:  -----2-----2-----2-----2--...
複製代碼

take 和 first

take是取前幾個元素後結束observable，first就是取第一個元素後直接結束，和take（1）同樣

interval(1000).pipe(
      take(3)
    ).subscribe(res => console.log(res))
    
    //Marble diagrams
    origin: -----0-----1-----2-----3--...
            take(3)
    take:   -----0-----1-----2
複製代碼

skip

skip和take相反，用於跳過前面的n個元素

interval(1000).pipe(
      skip(2)
    ).subscribe(res => console.log(res))
    
    //Marble diagrams
    origin: -----0-----1-----2-----3--...
            skip(2)
    skip:   -----------------2-----3--...
複製代碼

takeLast 和 last

takeLast 就是選取後n個元素，last就是取最後一個元素,由於是最後的元素，在爲結束前沒法預知什麼時候結束，因此takelast是在observable完成之後再同步送出

interval(1000).pipe(
      take(3)，
      takeLast(2)
    ).subscribe(res => console.log(res))
    
    //Marble diagrams
    origin: -----0-----1-----2-----3--...
            take(3)
    take:   -----0-----1-----2
             takeLast(2)
    take:   -----------------（12）
複製代碼

takeUntil

takeUntil的做用是在某件事情發生時observer送出complete,從而中止並關閉這個observable,takeUntil中必須傳入一個observable對象。

let click = fromEvent(document.body, 'click');
interval(1000).pipe(
      takeUntil(click)
    ).subscribe(res => console.log(res))
    
    //Marble diagrams
    origin:      -----0-----1-----2-----3--...
            takeUntil(click)       click
    takeUntil:   -----0-----1-----2--
複製代碼

takeUntil在實際工做中有不少運用，例如在離開某模塊或者頁面時，觸發組件內全部observable的takeUntil，關閉全部監聽，防止浪費內存，還有在某些行爲監聽中，當用戶觸發了特色行爲關閉監聽。

concatAll

concatAll的做用是當observable送出的元素也是observable時，將全部observable串聯起來。須要注意的一點，不管是同步仍是異步的observable，先發出來的元素必須執行完纔會執行下一個。

let obs1 = interval(1000).take(5);
let obs2 = interval(500).take(2);
let obs3 = interval(2000).take(1);

of(obs1, obs2, obs3).pipe(
    concatAll()
).subscribe(res => cosnole(res))

origin : (o1                 o2      o3)|
           \                  \       \
            --0--1--2--3--4|   -0-1|   ----0|
                
                concatAll()        

concatAll:  --0--1--2--3--4-0-1----0|

複製代碼

concat

concat和concatAll同樣是把多個observable串聯起來，只是用法不同，concat能夠傳入observable參數，能夠用於在observable執行過程當中插入新的observable。一樣，它要等到前一個observable完成後才能進行下一個的操做。

let obs2 = interval(500).take(2);
let obs3 = interval(500).take(1);

interval(1000).pipe(
    take(3),
    concat(obs2,obs3)
).subscribe(res => cosnole(res))

origin : ----0----1----2|
obs2: --0--1|
obs3: --0|
            concat()
concat: ----0----1----2--0--1--0|
複製代碼

小結

這些操做符都是比較簡單和經常使用的。下一篇會將其餘操做符進行介紹。以後會有一個對操做符綜合使用的舉例。