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
