学习 RxJS 操作符_什么是rxjs操作符-CSDN博客

本文链接：https://blog.csdn.net/lvxinaidou/article/details/108596905

学习 RxJS 操作符

1.什么是操作符
2.实例操作符 vs. 静态操作符
- 2.1实例操作符
- 2.2静态操作符
3. 弹珠图
4.选择操作符
5.操作符分类
6. 学习地址：

1.什么是操作符

操作符是 Observable 类型上的方法，比如 .map(…)、.filter(…)、.merge(…)，等等。当操作符被调用时，它们不会改变已经存在的 Observable 实例。相反，它们返回一个新的 Observable ，它的 subscription 逻辑基于第一个 Observable 。

2.实例操作符 vs. 静态操作符

2.1实例操作符

它是 Observable 实例上的方法

2.2静态操作符

它们是直接附加到 Observable 类上的，一些创建操作符，组合操作符都是静态操作符

3. 弹珠图

要解释操作符是如何工作的，文字描述通常是不足以描述清楚的。许多操作符都是跟时间相关的，它们可能会以不同的方式延迟(delay)、取样(sample)、节流(throttle)或去抖动值(debonce)。图表通常是更适合的工具。弹珠图是操作符运行方式的视觉表示，其中包含输入 Obserable(s) (输入可能是多个 Observable )、操作符及其参数和输出 Observable 。

在弹珠图中，时间流向右边，图描述了在 Observable 执行中值(“弹珠”)是如何发出的。
插入图片：

4.选择操作符

你需要找到一个操作符来解决你的问题吗？从下面的列表中选择一个选项开始：

我有一个已存在的Observable，然后…(详看官网)

5.操作符分类

高阶Observable
pipe, 可以把多个操作符串联起来，形成数据管道。

 let  operatePiep_$ = of(1,2,3);
    const result = operatePiep_$.pipe(filter(x => x%2 === 0), map(x => x*2));   //过滤是偶数，结果每个数据乘以2
    result.subscribe(item => {
      console.log(item)    // 4
    });
    // pipe的用法就是可以连接多个操作符，和下面链式调用结果一样
    const result2 = operatePiep_$.filter(x => x%2 === 0). map(x => x*2);
    result2.subscribe(item => {
      console.log(item)    // 4
    });

注：没有写案例得就是项目中还未使用过

5.1 创建操作符

5.1.1. create

5.1.2. of：列举数据

5.1.3. range：指定范围

5.1.4. generate：循环创建

5.1.5. repeat：重复数据流

5.1.6. 三个极简的操作符： empty， never， throw

5.1.7. 创建异步数据的Observable对象： interval和timer定时产生数据

5.1.8. from:可把一切转化为Observable

5.1.9. fromPromise: 异步处理

5.1.10. fromEvent

5.1.11. fromEventPattern

5.1.12. ajax

5.1.13. repeatWhen

5.1.14. defer

5.2 转换操作符

5.2.1. map

5.2.2. mapTo

5.2.3. pluck

5.2.4. windowTime

5.2.5. bufferTime

5.2.6. widowCount和bufferCount

5.2.7. windowWhen和bufferWhen

5.2.8. windowToggle 和 bufferToggle

5.2.9. window和buffer

5.2.10. concatMap

5.2.11. mergeMap

5.2.12. switchMap

5.2.13. exhaustMap

5.2.14. MapTo

5.2.15. expand

5.2.16. scan

5.2.17. mergeScan

5.2.18. pairwise

5.3 过滤操作符

5.3.1. filter

5.3.2. first

5.3.3. last

5.3.4. take

5.3.5. skip

5.3.6. skip和skipUntil

5.3.7. throttle和debounce

 let operateDebounceTime_$ = interval(300);
    operateDebounceTime_$.pipe(take(5), debounceTime(3000)).subscribe(item => {
      console.log(item);   //防止抖动，最后一个值才会发布     输出:4
    });

//节流，一共发布5次， 为了节流，再隔300ms去发布，减少发布次数， 
    // interval(300)的弹珠图：   0----300ms----1----300ms----2----300ms----3----300ms----4
    // interval(300)的弹珠图：   0----300ms--------300ms----2----300ms--------300ms----4
    let operateThrottleTime_$ = interval(300);
    operateThrottleTime_$.pipe(take(5), throttleTime(300)).subscribe(item => {
      console.log(item);  // 输出： 0 2 4
    });

5.3.8. auditTime和audit

5.3.9. sampleTime和sample

5.3.10. ignoreElements

5.3.11. elemetAt

5.3.12. single

5.3.13. distinct、distinctUntilChanged

 let operateDistinct_$ =  from(['a', 'b', 'c', 'a', 'b']);
    // operateDistinct_$.pipe(zip(interval(3000))).subscribe(item => {
    //   console.log(item);      // 0 ['a', 0] ['b', 1] 2 ['c', 2] ['a', 3] 4 ['b', 4]
    // });

    // operateDistinct_$.pipe(zip(interval(3000), (x, y) => x)).subscribe(item => {
    //   console.log(item);      // 0 2 4 'a', 'b', 'c', 'a', 'b'
    // });

    operateDistinct_$.pipe(zip(interval(3000), (x, y) => x), distinct()).subscribe(item => {
      // console.log(item);      // 0 2 4 'a', 'b', 'c', 去重
    });
    operateDistinct_$.pipe(zip(interval(3000), (x, y) => x)).pipe(distinct()).subscribe(item => {
      // console.log(item);      // 0 2 4 'a', 'b', 'c', 去重
    });
  let operateDistinct3_$ = from(['a', 'b', 'c', 'a', 'b']);
    operateDistinct3_$.pipe(zip(interval(300), (x, y) => x),distinct(null, interval(1300))).subscribe(item => {
      console.log(item);      // 0,a,b,2,c,a,4,b
    });

     let operateDistinct2_$ = from([{value: 'a'}, {value: 'b'}, {value: 'c'}, {value: 'a'}, {value: 'b'}]);
    operateDistinct2_$.pipe(zip(interval(3000), (x, y) => x)).pipe(distinct((x) => { return x.value})).subscribe(item => {
      // console.log(item);      // 0 2 4 {value: 'a'}, {value: 'b'}, {value: 'c'}
    });

5.3.14. takeUntil

5.4 组合操作符

5.4.1. concat:首尾相连


  //调用接口
    let operateConcat1$ =  this.rxjsService.getTest1Json();
    let operateConcat2$ = this.rxjsService.getTest2Json();
    const result = operateConcat1$.pipe(concat(operateConcat2$))
    result.subscribe(item => {
      console.log(item);// interface 1 , interface 2
    });
    // mock接口数据，已经异步事件，
    // concat连接不分异步事件，一个连接一个，按顺序来
    let value1$ = interval(1000).pipe(take(3));  // 0 1 2
    let value2$ = of(3);  // 3
    let value3$ =  of(4,5);  // 4 5
    
    const result2 =  value1$.pipe(concat(value2$,value3$));
    result2.subscribe(item => {
      console.log(item);   // 0 1 2  3  4 5
    });

在这里插入图片描述

 const result3 =  value2$.pipe(concat(value1$, value3$));
    result3.subscribe(item => {
      console.log(item);  // 3  0 1 2  4 5
    });

在这里插入图片描述

5.4.2. merge：先到先得到快速通道

//merge 没有先后顺序， 那个完成现执行那个
     let value1$ = interval(1000).pipe(take(3));  // 0 1 2
     let value2$ = of(3);  // 3
     let value3$ =  of(4,5);  // 4 5
  
     let operateMerge1$ =  this.rxjsService.getTest1Json();
     let operateMerge2$ = this.rxjsService.getTest2Json();
     
     const result1 = operateMerge1$.pipe(merge(operateMerge2$))
 
     result1.subscribe(item => {
       console.log(item);// interface 1 , interface 2
     });

     const result2 = value1$.pipe(merge(value2$,value3$))
     result2.subscribe(item => {
       console.log(item);  // 3 4 5 0 1 2   0 1 2最后执行了并没有在第一个
     });

     const result3 = value2$.pipe(merge(value1$,value3$))
     result3.subscribe(item => {
       console.log(item);   // 3 4 5 0 1 2   0 1 2最后执行了并没有在第一个
     });

在这里插入图片描述

5.4.3. zip：拉链式组合

5.4.4. combineLatest：合并最后一个数据

5.4.5. withLatesFrom

5.4.6. race：胜者通吃

5.4.7. startWith

5.4.8. forkJoin

5.4.9. concatAll

5.4.10. mergeAll

5.4.11. switch

5.4.12. exhaust

5.5 多播操作符

5.5.1. Subject

5.5.2. publishBehavior 和 BehaviorSubject

5.5.3. publishReplay和 replaySubject

5.5.4. publishLast和 AsyncSubject

5.5.5. multicast

5.5.6. publish

5.5.7. share

5.5.8. shareReplay

5.6 错误处理操作符

5.6.1. try/catch

5.6.2. throwError和catchError

    let operateError_$ = throwError({error: 'test throwError'});  
    // let operateError_$ = throwError(123);   //throwError (参数可以多种类型)
    operateError_$.pipe(catchError(error => { return of(error) })).subscribe(item => {
      console.log(item);    //  1,2
    }, error => {
      console.log(error);      //{error: 'test throwError'}  // 123
    })

5.6.3. retry

5.6.4. retryWhen

5.6.5. finally

5.7 工具操作符

5.7.1. do

5.7.2. delay

let operateDelay_$ = interval(300)
    operateDelay_$.pipe(take(5), delay(3000)).subscribe(item => {
      console.log(item);     // 等3000ms, 才输出 0 1 2 3 4 5
    })

5.7.3. delayWhen

let operateDelayWhen_$ = interval(300);
    operateDelayWhen_$.pipe(take(5), delayWhen(x => empty().pipe(delay(x*1000)) ) ).subscribe(item => {
      console.log(item);           // empty(),去掉0， 等待1000ms， 输出：1， 等待2000ms， 输出：2， 等待3000ms， 输出：3，等待4000ms， 输出：4
    })