rxjs操作符

mac2025-04-03  12

类型操作符用处实例操作类from(数组,Promise,Iterable)转化为Observable fromEvent(事件)转化为Observable of接收一系列数据,emit出去 转换类map  mapTo定义固定值 pluck

map的扩展

fromEvent(dom,event).pipe(

  .pluck(pageX)  //返回event.pageX

)

过滤类take取流中前n个

const interval$ = Rx.Observable.interval(100)

.filter(v=>{v%2==0})  //取偶数

.take(3)  //0,2,4

filter筛选first

取流第一个

相当于take(1)

const interval$ = Rx.Observable.interval(100)

.filter(v=>{v%2==0}) 

.first() //0

last取流最后一个

const interval$ = Rx.Observable.interval(4)

.filter(v=>{v%2==0}) 

.larst() //4

skip跳过前n个

const interval$ = Rx.Observable.interval(100)

.filter(v=>{v%2==0}) 

.skip(3)  //6,8,10...

工作类do流处理期间对数据进行操作

const interval$ = Rx.Observable.interval(100)

.do(v=>{console.log(v)})

.take(2)

变换类scan循环操作,参数一为上一次操作的结果,参数二为新值内容

const interval$ = Rx.Observable.interval(100)

.filter(v=>{v%2==0}) //取偶数

.take(4)

.scan((x,y)=>{return x+y}) 

2(0+2)

6(2+4)

12(6+6)

数字类reduce

 

将流计算结果做统一的最后处理并发射

发射最终值

同scan但只发送最后一个结果

const interval$ = Rx.Observable.interval(100)

.filter(v=>{v%2==0}) //0,2,4,6,8...

.take(4) 

.reduce((x,y)=>{return x+y})

12(6+6)

创建类interval循环,发射出索引

const interval$ = Rx.Observable.interval(100)

//0,1,2,3...99

timer

循环,发射出索引

指定时间启动,指定间隔再启动

const timer$ = Rx.Observable.timer(100,200)

.subscribe(v=>console.log(v))

0 100ms后发出0

1 200ms后发出1

2 200ms后发出2

...

时间过滤类debounce只关注大于等于num毫秒间隔的事件内容,参数可为函数

const length$=

Rx.Observable.fromEvent(length.'keyup')

.pluck('target','value')

.debounce(()=>{Rx.Observable.interval(300)})

过滤300ms内keyup事件监听

debounceTime只关注大于等于num毫秒间隔的事件内容,参数只为固定毫秒数

const length$=

Rx.Observable.fromEvent(length.'keyup')

.pluck('target','value')

.debounceTime(300)

元素过滤类distinct过滤一样的,保留不一样的 distinctUtilChanged只跟前一个元素比,过滤一样的,保留不一样的

distinctUntilChanged()

合并类marge按照流运行状态合并 concat将流前后拼接(流1-流2) startWith设定流发射初始值 合并类combineLatest对两个流进行对应处理操作 withLatestFrom基准流改变时进行流操作处理 zip将两流对应位置的元素进行处理操作  

takeUntil

当数据流发射出数据时结束流 

 

最新回复(0)