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

小结

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

转载于:https://juejin.im/post/5c9241905188252da05f41d0