RxJS常用操作符

最新推荐文章于 2023-06-30 23:44:08 发布

西境的小狮子

最新推荐文章于 2023-06-30 23:44:08 发布

阅读量1.2k

点赞数 1

分类专栏： Angular2.0+ 文章标签： RxJS 操作符 operator switchMap interval

本文链接：https://blog.csdn.net/maiowu1001/article/details/77689429

版权

Angular2.0+ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下只是列出的一些常用操作符的常用方法，具体请参考RxJS中文网

创建操作符

interval():Observable

每个时间间隔都发出自增整数的Observable，自增整数是从0开始的。第一次并没有立马去发送, 而是第一个时间段过后才发出。

range(start:number,count:number):Observable

start和count分别为区间的开始和长度
创建一个observable,顺序发出一个有限区间范围内的连续整数，同步发送

defer(function):Observable

创建一个Observable，function可看做observableFactory,当且仅当输出Observable被订阅时，使用ObservableFactory惰性创建一个新的observable。
注意：每个订阅者获得的都是只属于它们自己的Observable。

timer(initialDelay,?period):Observable

创建一个Observable，该Observable在初始initialDelay后发出0，并且在之后的每个period后发出自增的数字。如果时间周期没有被指定,输出Observable只发出0。否则,会发送一个无限数列。

throw(any):Observable

创建一个Observable，它不发送数据给观察值，仅仅只是立即发出error通知。常和其他Observable组合使用，如在mergeMap中使用。

转换操作符

map(function):Observable

将function应用于源 Observable 发出的每个值，结果值作为输出Observable要发出的值。

mapTo(value:any):Observable

每次源Observble发出值时，都在输出Observable上发出给定的常量值。类似于 map，但它每一次都把源值映射成同一个输出值。

mergeMap(function):Observable

function 源Observable发出一个值时，该函数就接收该值作为参数，并返回一个Observable对象。然后使用merge并行合并所有的输入Observable。
相当于先使用map,再使用merge。

switchMap(function):Observable

function 源Observable发出一个值时，该函数就接收该值作为参数，并返回一个(所谓的“内部”)Observable 。然后使用switch打平。
相当于先使用map，再使用switch。如：

var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.switchMap((ev) => Rx.Observable.interval(1000));
result.subscribe(x => console.log(x));

buffer(closingNotifier):Observable

buffer(closingNotifier):Observable<T[]>
closingNotifer:一个Observable对象
将源Observable发出的值缓冲起来，直到closingNotifier发出值,输出Observable才发出该缓冲区的值并且内部开启一个新的缓冲区,等待下一个closingNotifier的发送。将过往的值收集到一个数组中。

pluck(properties:…string):Observable

properties：描述对象属性路径的字符串的列表
类似于 map，但仅用于选择源Observable每个发出对象的某个嵌套属性值。如果属性无法解析，它会返回 undefined 。如：

//将每次点击映射成点击的 target 元素的 tagName 属性
var clicks = Rx.Observable.fromEvent(document, 'click');
var tagNames = clicks.pluck('target', 'tagName');
tagNames.subscribe(x => console.log(x));

pairwise():Observable

pairwise():Observable<Array<T>>
将源Observable发出的当前值和发出的前一个值，作为数组放在一起，然后输出Observable发出该数组。
源Observable的第N个发送会使输出Observable发出一个数组[(N-1)th, Nth]。所以当源Observable发出第一个值时，输出Observable不发出任何值。

scan(function,?seed):Observable

function可看做累加器。如果seed值提供了，这个值会被累加器用作初始值。如果seed值没有被提供，源数据的第一项会被当做初始值。
输出Observable第一次发出的值即初始值，之后每累加一次，输出Observable就会发出该中间值

过滤操作符

debounce(function):Observable

function返回durationObservable，只有当durationObservable发出值或者完成时，输出Observable才会发出源Observable的最新值，而其余的会被丢弃。
注意：这个操作符会追踪源Observable的最新值。有点像延时发送。

throttle(function):Observable

function接收源Observable发出的值，返回一个durationObservable，用于为每个值计算沉默的时间

最开始，源Observable发出第一个值时，输出Observable会转发该值，然后当durationObservable发出值或者完成时，输出Observable才能继续转发源Observable发出的值；一旦转发过后，又要等待durationObservable发出值或完成，即之后重复此过程，如：

var clicks = Rx.Observable.fromEvent(document, 'click');
var result = clicks.throttle(ev => Rx.Observable.interval(1000));
result.subscribe(x => console.log(x));

源Observable发出一个值一秒后，输出Observable可以开始发出源Observable发出的值；源Observable再发出一个值后，即继续重复此过程

take(count:number):Observable

输出Observable只转发源Observable发出的前count个值。

takeUntil(notify):Observable

输出Observable 发出源Observable所发出的值，直到某个时间点notifier发出它的第一个值或者完成。

takeWhile(predicate)：Observable

源 Observable发出的每个值都会传给predicate函数，它会返回源值是否满足条件的布尔值。若为真，则输出Observable转发源Observable发出的该值。若为假，则输出Observable立即完成。

skip(count:Number):Observable

返回一个Observable，该Observable跳过源Observable发出的前N个值(N = count)。

last(function?):Observable

若无function参数，则输出Observable只在源Observable完成时，发出源Observable发出的最后一个值。
若有function参数，则输出Observable发出源Observable的发出值中满足该函数的最后一项。

如果Observale完成前还没有发出任何next通知的话，就会发送EmptyError给观察者的error回调函数。如果在源Observable中没有匹配predicate函数的项，则抛出。

first()

参考last()操作符。
假如在源Observable完成前无法发出一个有效值的话，那么会发出defaultValue。如果没有提供defaultValue并且也找不到匹配的元素，则抛出错误。

filter(function):Observable

function:接收源Observable发出的值，返回布尔值
此操作符只发送源 Observable的中满足指定function函数的项来进行过滤。

组合操作符

merge(Observables):Observable

输出Observable发出的值是每个输入Observable发出的值。所有的输入 Observable都完成了，输出Observable才能完成。任何由输入Observable发出的错误都会立即在输出Observalbe上发出。并行合并

concat(InputObservables)：Observable

顺序的、串行的将所有输入Observable发出的值合并给输出Observable。只有前一个Observable结束才会进行下一个Observable。

switch():Observable

将高阶Observable(发出Observable的Observable)转换成一阶Observable。
每次观察到这些已发出的内部Observables中的其中一个时，输出Observable订阅这个内部Observable并开始发出该Observable所发出的项。当发出一个新的内部 Observable 时，switch会从先前发送的内部Observable 那取消订阅，然后订阅新的内部Observable并开始发出它的值。后续的内部Observables也是如此。如：

var clicks = Rx.Observable.fromEvent(document, 'click');
// 每次点击事件都会映射成间隔1秒的 interval Observable
var higherOrder =clicks.map((ev)=>Rx.Observable.interval(1000));
var switched = higherOrder.switch();
// 结果是 `switched` 本质上是一个每次点击时会重新启动的计时器。
//注意是重新启动
switched.subscribe(x => console.log(x));

startWith(values:…T):Observable

返回的 Observable会先发出作为参数指定的项，然后再发出由源Observable 所发出的项。如：

//先发出数字7，然后发出错误通知。
var result = Rx.Observable.throw(new Error('oops!')).startWith(7);
result.subscribe(x => console.log(x), e => console.error(e));

工具操作符

do(function):Obsrvable

方便我们进行debug和跟踪数据变化。你可以用它做任何操作，一般都是有副作用的操作，比如控制台打印，写入文件，修改DOM节点等等，但它不改变事件流中的事件。
如果 do 返回的 Observable没有被订阅，那么function指定的副作用永远不会执行。因此do只是侦查已存在的执行，它不会像subscribe那样触发执行的发生。

delay(delay:number|Date):Observable

如果延时参数是数字,这个操作符会将源Observable的发出时间都往后推移固定的毫秒数。保存值之间的相对时间间隔。
如果延迟参数是日期类型,这个操作符会延时Observable的执行直到到了给定的时间。

observeOn(scheduler,delay:number):Observable

scheduler:使用该调度器来重新发出源Observable的所有通知。
delay:以毫秒为单位指定延迟通知的发送时间。

observeOn与delay操作符最主要的区别是它会延迟所有通知，包括错误通知，而delay会当源Observable发出错误时立即通过错误。通常来说，对于想延迟流中的任何值，强烈推荐使用delay操作符，而使用observeOn时，用来指定应该使用哪个调度器来进行通知发送。

数学和聚合操作符

reduce(function,?seed):Observable

function可看做累加器。如果seed值提供了，这个值会被累加器用作初始值。如果seed值没有被提供，源数据的第一项会被当做初始值。
输出Observable只会发出一个值，并且是当源Observable完成时才发出.它等价于使用 scan 操作符后面再跟 last 操作符。

max(function):Observable

源Observable完成时，输出Observable发出单一项
function可选，用于比较

min(function):Observable

源Observable完成时，输出Observable发出单一项
function可选，用于比较

多播操作符

multicast(subject):ConnectableObservable

工作原理：观察者订阅一个基础的 Subject，然后 Subject 订阅源 Observable 。
ConnectableObservable被订阅时，就像subject。有一个connect()方法，该方法决定何时启动共享Observable的执行，返回的是subscription对象，可以依据此取消共享Observable的执行。如：

var source = Rx.Observable.from([1, 2, 3]);
var subject = new Rx.Subject();
var multicasted = source.multicast(subject);

// 在底层使用了 `subject.subscribe({...})`:
multicasted.subscribe({
  next: (v) => console.log('observerA: ' + v)
});
multicasted.subscribe({
  next: (v) => console.log('observerB: ' + v)
});

// 在底层使用了 `source.subscribe(subject)`:
multicasted.connect();

refCount():Observable

源Observable类型为ConnectableObservable,输出Observable类型为普通的Observable。
refCount的作用是，当有第一个订阅者时，多播Observable会自动地启动执行，而当最后一个订阅者离开时，多播Observable会自动地停止执行。

var source = Rx.Observable.interval(500);
var subject = new Rx.Subject();
var refCounted = source.multicast(subject).refCount();
var subscription1, subscription2, subscriptionConnect;

// 这里其实调用了 `connect()`，
// 因为 `refCounted` 有了第一个订阅者
console.log('observerA subscribed');
subscription1 = refCounted.subscribe({
  next: (v) => console.log('observerA: ' + v)
});

setTimeout(() => {
  console.log('observerB subscribed');
  subscription2 = refCounted.subscribe({
    next: (v) => console.log('observerB: ' + v)
  });
}, 600);

setTimeout(() => {
  console.log('observerA unsubscribed');
  subscription1.unsubscribe();
}, 1200);

// 这里共享的 Observable 执行会停止，
// 因为此后 `refCounted` 将不再有订阅者
setTimeout(() => {
  console.log('observerB unsubscribed');
  subscription2.unsubscribe();
}, 2000);