rxjs 常用的管道操作符

• 操作符文档
• api 列表
• 什么是RxJS 运算符?
• 创建自定义运算符

map 系列

• map 类似于 Array.prototype.map()
• concatMap 将映射后的流合并输出到一个流
• mergeMap 将映射后的流合并输出到一个流
• switchMap 会停止发出先前发出的内部 Observable 并开始发出新的内部 Observable 的值。(可以停止上一次发出的ajax)

  from([1, 2, 3])
    .pipe(switchMap((e) => of(e).pipe( delay(1000) )))
    .subscribe(l); // 3
  

scan 和 reduce

• scan 可以用于 Subject
• reduce 只返回最后的值
• mergeScan 类似 scan

from([2, 3]).pipe(scan((acc, item) => (acc += item), 10)).subscribe(l);   // 12 15
from([2, 3]).pipe(reduce((acc, item) => (acc += item), 10)).subscribe(l); // 15

filter

返回你想要的数据，为满足条件后面的pipe不会执行

from([2, 3, 4])
  .pipe(filter((i) => i <= 3))
  .subscribe(l); // 2 3

pairwise

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

of(1, 2, 3).pipe(pairwise()).subscribe(l);

[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 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); // 1

skip 系列

跳过源发出的值
skip(count: number) 跳过源发出的前N个值
skipLast(skipCount: number) 跳过源最后发出的的N个值
skipUntil(notifier: Observable) 从头开始一直跳过，直到 notifier 发出值停止
skipWhile(lambda) 跳过lambda返回true的值

take 系列

接收源发出的值

• take 接收源 最初的N个值
• takeLast 接收源最后N个值
• takeUntil notifier发出值， 源断流(完成) 你始终需要将takeUntil放在管道的最后
• takeWhile lambda返回true，才发出源的值

节流 throttle throttleTime

先发出最新的值， 在忽略 和 audit 相反 *通常作用与高频率事件节流，对于 mousemove 当第一次触发时将发出最新值，然后间隔100ms后如果有新值将继续发出新值，其它都会被节流掉 *

    const { fromEvent, throttleTime } = rxjs;
    const e$ = fromEvent(document.body, "mousemove").pipe( throttleTime(100) );
    e$.subscribe(l);

审计 audit auditTime

先忽略， 在发出最新的值

// 每隔两秒检查最新的值，然后发出
interval(500) .pipe(audit(() => interval(2000))) .subscribe(l);

// 和 audit 一样
interval(500) .pipe(auditTime(2000)) .subscribe(l);

样本 sample sampleTime

和 audit 类似，在周期时间间隔内取出源最新的值发出

防抖 debounce debounceTime

延时发送源发出的值, 如果期间源发出了新值的话，返回的值为最新的值，上一个会被丢弃掉（避免高消费事件时使用，搜索框一定要用这个, 配合 distinct 去重）

interval(500)
  .pipe(
    take(5),
    debounce(() => interval(2000)) // 如果源在2s内一直发出新值，返回的值会被替换为新值，直到2s后没有发出新值，返回的值将被输出
  )
  .subscribe(l); // 4

find 和 findIndex

类似 Array.prototype.find()

every

类似 Array.prototype.every()

toPromise

把 Observable 转化为 promise

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

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, "源观察完成后，附加一个发射，然后完成。"

single

断言源 必须只发出一个符合断言的值

timeout

如果 源 在给定的时间跨度内没有发出值，则出错

observeOn

使用指定的调度程序重新发出来自源的所有值

import { observeOn, asyncScheduler, take, from } from "rxjs";

console.log("start");
from([1, 2, 3, 4]).pipe( observeOn(asyncScheduler), take(3) ).subscribe(l);
console.log("end");


start
end
1
2
3

不常用的

• toArray() 把流发出的值塞在Array，源完成时 返回Array
• first; 发出源的第一个项，然后结束
• last 返回源的最后一项，然后结束
• ignoreElements 忽略源所发送的所有项，只传递 complete 或 error
• startWith(value) 在源第一个值之前发出 value