阅读 54

RxJS 6 转换操作符

测试Url

buffer(closingNotifier)

以数组形式缓存 Observable 发出的值

--closingNotifier(Observable<any>

fromEvent(document, 'click').pipe(buffer(interval(1000))).subscribe(e => console.log(e))
复制代码

bufferCount(bufferSize,startBufferEvery)

将数据缓存至数组,当数组length = bufferSize 时返回

--bufferSize(number):缓存区的最大长度

--startBufferEvery(number):可选,相隔 startBufferEvery 开启新缓存区

fromEvent(document, 'click').pipe(bufferCount(2)).subscribe(e => console.log(e))
复制代码

bufferTime(bufferTimeSpan,bufferCreationInterval,maxBufferSize,scheduler)

将数据缓存至数组,并周期性返回

--bufferTimeSpan(number):每隔 bufferTimeSpan 返回新缓存区

--bufferCreationInterval(number):开启新缓存区的间隔,捕获最后 bufferTimeSpan 时间段的数据

--maxBufferSize:缓存区length

--scheduler:(默认值: async)可选,调度器,调度缓冲区

fromEvent(document, 'click').pipe(bufferTime(2000,null,3)).subscribe(e => console.log(e))
复制代码

bufferWhen(closingSelector)

将数据缓存至数组,关闭 Observable 重新开启新缓存区

--closingSelector(function):该函数不接受参数,返回缓冲区数据,关闭 Observable

fromEvent(document, 'click').pipe(bufferWhen(() => interval(1000))).subscribe(e => console.log(e))
复制代码

map(value,key)

对值得依次打印,与原生类似

--value:值

--key:可选,键

of(1,2,3).pipe(map((value,key) => value)).subscribe(x => console.log(x))
复制代码

mapTo(value)

触发次数随 Observable 个数返回

--value(any

fromEvent(document, 'click').pipe(mapTo('eqweq')).subscribe(x => console.log(x))  
复制代码

max()、min()

原生 Math.max(any):传入一串可迭代的数据,返回最大值
复制代码

merge(observable)

将多个 observable 进行合并后返回新的 observable

of(1,2,3).pipe(merge(of(11,22,33)))
复制代码

mergeMap(project,resultSelector,concurrent)

将每个值投影到一个Observable,将其合并到输出Observable中

--project(function):两个参数,第一个value,第二个key,需要返回Observable

of(1,2,3).pipe(mergeMap(x => of(x+ "1")),).subscribe(res=>console.log(res))
复制代码

mergeMapTo(innerObservable,resultSelector,concurrent)

--innerObservable(observable):用来替换源 Observable 中的每个值 的 Observable

fromEvent(document, 'click').pipe(mergeMapTo(interval(1000).pipe(take(4)))).subscribe(x => console.log(x))
复制代码
返回值为每一个点击事件依次执行得结果;(第一次执行中可同步执行第二次事件)
复制代码

concatMap(project,resultSelector)

--project(function):两个参数,第一个value,第二个key,需要返回Observable

fromEvent(document, 'click').pipe(concatMap(e => of(1,2,3))).subscribe(res=>console.log(res))
复制代码

concatMapTo(innerObservable,resultSelector)

--innerObservable(ObservableInput):Observable,替换源Observable的每个值

fromEvent(document, 'click').pipe(concatMapTo(interval(1000).pipe(take(4)))).subscribe(x => console.log(x))  
复制代码
返回值为每一个点击事件依次执行得结果;(第一次执行完毕,才执行第二次事件,第一次没执行完毕,第二次事件会等待第一次结束再执行)
复制代码

exhaustMap(project,resultSelector)

--project(function):函数, 当应用于源 Observable 发出的项时,返回一个 Observable 。

fromEvent(document, 'click').pipe(exhaustMap(e => of(1,2))).subscribe(x => console.log(x))
复制代码
返回值为每一次点击执行的结果,其余点击无效
复制代码

scan(accumulator,seed)

应用于具有累加功能的场景(不传 seed ,accumulator 的参数都指向 event)

--accumulator(function):三个参数,value/event/key

--seed():可选,初始值

fromEvent(document, 'click').pipe(scan((e,v,i) => {console.log(v,i);return e + 2},5)).subscribe(x =>console.log(x))
复制代码
subscribe 返回 7/9/11...
复制代码

expand(project,concurrent)

--project(function):接受源 Observable 返回新 Observable

--concurrent(number):可选

fromEvent(document, 'click').pipe(mapTo(10),expand((x,i) => of(2 * i).pipe(delay(1000))),take(3)).subscribe(x => console.log(x))
复制代码

switchMap(project,resultSelector)

将每个值映射成 Observable ,然后使用 switch 打平所有的内部 Observables

--project(function):当应用于源 Observable 发出的项时,返回一个 Observable 。(可传入两个参数:value/key)

--resultSelector(function):可选

of(1, 2, 3).pipe(switchMap((x,i,a) => of(x, x ** 2, x ** 3))).subscribe(x => console.log(x))
复制代码

switchMapTo(innerObservable,resultSelector)

清除之前所有执行状态,重新执行新程序

--innerObservable(ObservableInput):用来替换源 Observable 中的每个值 的 Observable

--resultSelector(function):可选

fromEvent(document, 'click').pipe(switchMapTo(interval(1000))).subscribe(x => console.log(x))
复制代码

pluck(properties)

迭代 observable 的每一个嵌套属性

--properties(...string/...number):从每个源值(对象啊)中提取的嵌套属性

of({name:1,age:11,arr:[111,222,333]},{name:2,age:22},{name:3,age:33}).pipe(pluck('arr',0)).subscribe(x => console.log(x))
复制代码

pairwise()

将当前值和前一个值作为数组放在一起后将其发出(没有前一个值不返回)

of(1,2,3).pipe(pairwise()).subscribe(x => console.log(x))
复制代码
关注下面的标签,发现更多相似文章
评论