什么是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 diagramsorigin: -----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 diagramsorigin: -----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 diagramsorigin: -----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 diagramsorigin: -----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 diagramsorigin: -----0-----1-----2-----3--...take(3)take:   -----0-----1-----2takeLast(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 diagramsorigin:      -----0-----1-----2-----3--...takeUntil(click)       clicktakeUntil:   -----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|
复制代码

小结

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