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|
复制代码

小结

这些操做符都是比较简单和经常使用的。下一篇会将其余操做符进行介绍。以后会有一个对操做符综合使用的举例。