transform api 笔记

时间:2022-03-07 03:22:09

欢迎指导与讨论:)

  前言

    本文是笔者翻译 RxJS 5.X 官网各类operation操作系列的的第一篇 —— transform转换。如有错漏,希望大家指出提醒O(∩_∩)O。更详细的资料尽在rxjs官网 【】与带有demo例子的网站【】。

    本文有关于transform操作的内容:buffer、bufferCount、bufferTime、bufferToggle、bufferWhen、concatMap、concatMapTo、exhaustMap、expand、groupBy、map、mapTo、merge、mergeMap、mergeMapTo、mergerScan、mergeAll、pairwise、partition、pluck、scan、switchMap、switchMapTo、window、windowCount、windowTime、windowToggle、windowWhen。

  1. buffer —— 自定义分组

    建立一个缓冲区(Observable),将数据源产生的值收集到缓冲区中,然后通过一些规则,让这些值重新发射。

var source = Rx.Observable.timer(0, 50) .buffer(function () { return Rx.Observable.timer(125); }) .take(3); // [0, 1, 2], [3, 4, 5], [6, 7]

  2. bufferCount —— 根据数据量分组

    建立一个缓冲区(Observable),将数据源收集到缓冲区中,然后根据参数n对数据源进行分组,每组有n个数据,最后把分组好的数据集合发射出来

var source = Rx.Observable.range(1, 6) .bufferCount(2); // [ 1, 2 ], [ 3, 4 ], [ 5, 6]

  3. bufferTime —— 根据时间分组

    建立一个缓冲区(Observable),将数据源收集到缓冲区中,然后根据时间参数n对数据源进行分组,在同一n毫秒下的数据为一组,然后把分组好的数据集合发射出来。

var source = Rx.Observable.timer(0,1000); //序列:0 1 2 3 ... var target = source.bufferTime(2500); //序列:[0,1,2] [3,4] ...

  4. bufferToggle —— 根据自定义开始与结束分组

    bufferToggle(open: Observable, () => close: Observalbe : Observalbe<T[]>)。(参考自资料)

const source$ = Rx.Observable.interval(500); const open$ = Rx.Observable.interval(1500); const close$ = Rx.Observable.interval(1000); const foo$ = source$.bufferToggle(open$, ( ) => { return close$; }); /** ---0---1---2---3---4---5---6---7---8---9----.... (source) -----------1-----------2-----------3--------... (open) --- ---x --- ---x --- ---x... (close) bufferToggle(open$, () => close$) ------------------([2,3])-----([5.6])-----([8,9])--... */

   5. bufferWhen —— 根据自定义关闭函数进行分组

     bufferWhen( closeFuc: function( ): Observable ): Observable<T[]>

     每当关闭函数发射值时,为当前数据进行一次分组,并把这次分组后的数据组返回。 

const open$ = Rx.Observable.interval(1000); const click$ = Rx.Observable.fromEvent(document, ‘click‘); var w = open$.bufferWhen(( ) => click$); w.subscribe(x => console.log(x)) // 每次点击都能进行一次分组 // 第二秒点击第一次:[0, 1, 2] // 第六秒点击第二次:[3, 4, 5, 6]

  6. concatMap —— 数据遍历映射,并【依次】拼接

    将数据源中的每项数据都执行一遍指定的函数,并且此函数需返回一个Observable,最后将各个运行函数后的Observable依次拼接起来。mergeMap是把运行后合并起来。

var source = Rx.Observable.of(1,2,3); var mf = function(item){ return Rx.Observable.range(item,3); }; var target = source.concatMap(mf); //序列:1 2 3, 2 3 4, 3 4 5

  7. concatMapTo —— 数据遍历映射为特定的Observable并【依次】拼接

    与concatMap类似,但是将每个值映射到的是相同内容Observable