rxjs 常用的管道操作符

操作符文档

api 列表

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

map switchMap mergeMap

mep 类似于 Array.prototype.map()

switchMap switchMap 会停止发出先前发出的内部 Observable 并开始发出新的内部 Observable 的值。(可以停止上一次发出的ajax)

mergeMap 将每个值映射到Observable，必须返回一个Observable

scan 和 reduce

reduce 只返回最后的值

// res: 12, 15
from([2, 3]).pipe(
  scan((acc, item) => acc += item, 10))
  .subscribe(v => console.log(v))

// res: 15
from([2, 3]).pipe(
  reduce((acc, item) => acc += item, 10))
  .subscribe(v => console.log(v))

filter 和 partition

filter 返回你想要的数据

partition 返回两个 Observables [0] 符合断言， [1] 不符合断言

from([2, 3, 4]).pipe(
    filter(item => item <= 3))
    .subscribe(v => console.log(v))

pairwise()

将当前值和前一个值作为数组放在一起，然后将其发出

of(1, 2, 3)
  .pipe(
    pairwise()).subscribe(v => console.log(v))
[1,2]
[2,3]

min，max，count

都可以接收一个函数作为参数

from([1,2]).pipe(max()).subscribe(l) // 2
from([1,2]).pipe(min()).subscribe(l) // 1
from([1,2]).pipe(count()).subscribe(l) // 2

distinct(lambda) distinctUntilChanged([(Prev, current)=>{}]) 和 distinctUntilKeyChanged(key)

过滤掉重复的项

from([1, 2, 2, 3, 2])
  .pipe(distinct())
  .subscribe(l); // 1,2,3

elementAt

只发出第n个值, 然后完成 ,从0开始

from([1, 2])
  .pipe(elementAt(0, "default value"))
  .subscribe(l);

ignoreElements()

忽略源所发送的所有项，只传递 complete 或 error

skip(count: Number)，skipLast(count: number)，skipWhile(lambda)

skip 跳过源发出的前N个值

skipLast 跳过源最后发出的的N个值

skipWhile 跳过lambda返回true的值

take(count: number)， takeLast(count: number)，takeUntil(notifier: Observable)，takeWhile(lambda)

take 接收源 最初的N个值

takeLast 接收源最后N个值

takeUntil notifier发出值， 源断流

takeWhile lambda返回true，才发出源的值

throttle(lambda: Observable)和 throttleTime(number)

先发出最新的值， 在忽略

audit(lambda: Observable)和 auditTime(number)

先忽略， 在发出最新的值

    interval(500)
      .pipe(auditTime(1000))
      .subscribe(l); // 1s后发出 2, 1被忽略

debounce(lambda: Observable) 和 debounceTime(number)

延时发送源发出的值, 如果期间源发出了新值的话，返回的值为最新的值，上一个会被丢弃掉（避免高消费事件时使用）

sample(Observable) 和 sampleTime(number)

在周期时间间隔内发出源最新值。

find 和 findIndex

类似 Array.prototype.find()

toPromise

把 Observable 转化为 promise

  click = async e => {
    let res = await ajax('http://localhost:1995/a').pipe(map(res => res.response)).toPromise();
    l(res)
  }

buffer bufferCount bufferTime bufferToggle bufferWhen

buffer系列，将过去的值作为数组收集，在事件触发时发出收集好的值

const send$= fromEvent(document, 'click');
const interval = interval(1000);

const buffered = interval.pipe(buffer(send$));
buffered.subscribe(l);

defaultIfEmpty

如果源Observable完成而没有发出任何next值，则发出给定值 ，否则镜像源Observable

const { of, from, empty } = require("rxjs");
const { mergeMap, defaultIfEmpty } = require("rxjs/operators");

from([1, 2, 2, 3, 2])
  .pipe(
    mergeMap(el => (el > 10 ? of(el) : empty())),
    defaultIfEmpty("not data"),
  )
  .subscribe(l); // not data

delay delayWhen

延迟来自源Observable的项目的发射

endWith

from([1, 2])
  .pipe(endWith("源观察完成后，附加一个发射，然后完成。"))
  .subscribe(l); // 1, 2, "源观察完成后，附加一个发射，然后完成。"

不常用的

pluck(properties: ...string); 取一个对象的属性类似 obj.xxx.xxx
toArray(); 把流发出的值塞在Array后，返回Array