Rxjs常用的管道操作符

  • 时间:
  • 来源:互联网

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
luanxiyuan
发布了276 篇原创文章 · 获赞 24 · 访问量 11万+
私信 关注

本文链接http://element-ui.cn/news/show-1570.aspx