Rxjs常见操作符

一.RxJS初试

• 在javascript中的试炼

  const height = document.getElementById('height');
  const height$ = Rx.Observable.fromEvent(height, 'keyup');//$是约定俗称的命名方式,因为通过Rx.Observable已经将其转换成了流形式,其中含义是:将keyup事件转换成了Observable观察者
  //既然是观察者,则可以订阅
  height$.subscribe(val => console.log(val));//当输入的时候会输出事件的对象,获得值则使用val.target.value
  // 输入是1,console打印的就是1
  
  

• RxJs的威力在于合并和转换流,实例如下

  • html

    <input type="text" id="length"/>
    <input type="text" id="width" />
    <div id="area"></div>
    
    

  • js

    const length = document.getElementById('height');
    const width = document.getElementById('width');
    const area = document.getElementById('area');
    const length$ = Rx.Observable.fromEvent(length, 'keyup').pluck('target','value');
    const width$ = Rx.Observable.fromEvent(width, 'keyup').pluck('target','value');
    //combineLatest表示如果监听的两个值有一个改变则会重新计算一遍
    const area$ = Rx.Observable.combineLatest(length$, width$, (l,w)=>{return l*w});//用于将两个流合并成一个数据流
    area$.subscribe(val => area.innerHTML = val);
    
    

• 事件流:理解Rx的关键是要把任何变化想象成事件流

二.RxJS常见操作符

1.常见创建类操作符

• from:可以把数组、Promise、以及Iterable转化为Observable
• fromEvent:可以把事件转化为Observable
• of:接受一系列的数据，并把它们emit出去
  • 如可以使用object$ = Rx.Observable.of({id:1,value:20})转化对象，使用的时候应该是object. v a l u e 或 o b j e c t .value或object.value或object.id的方式

2.常见转换操作符

• map

  • 是mapTo、pluck操作符的根本

  • 举例将上述pluck操作符取target的value值转换成使用map操作符

    const width$ = Rx.Observable.fromEvent(width, 'keyup').map(ev=>ev.target.value);
    
    

  • 在angular中灵活使用Observable如下

    // 定义一个发起网络请求获取Observable的方法
    getQuote():Observable<Quote> {
        const uri = 'http://localhost:3000';
        return this.http.get(uri)
                .map(res => res.json() as Quote);// 将请求返回的内容转换成json并转换成对应定义的Quote对象
    }
    
    

• mapTo

  • 比如点击按钮事件或其他事件，我们不需要关注其值内容，只需要知道发生了即可，可以使用mapTo定义成一个固定值

  • 实例代码

    const width$ = Rx.Observable.fromEvent(width, 'keyup').mapTo(1);//此时执行keyup事件，width$的值即为1
    //等同于如下
    const width$ = Rx.Observable.fromEvent(width, 'keyup').map(_ => 1);//此时执行keyup事件，width$的值即为1
    
    

• pluck

3.Observable的性质

• Observable有三种状态（即subscribe的三个参数）：next、error、complete
  • next是正常执行时的内容，subscribe的第一个参数
  • error是当执行时出错，或监听了throw类型Observable时的执行内容，subscribe的第二个参数
  • complete是Observable执行结束时的内容，subscribe的第三个参数
• 特殊的Observable：永不结束、Never、Empty（结束但不发射）、Throw
  • Never类型Observable表示不会发生也永远不会结束，会在执行过程中导致，也可直接通过Rx.Observable.error('xxx')的方式声明，结果不会执行next、error、complete中任何一个阶段
  • Empty类型Observable不会发射元素会直接结束，会在执行过程中导致，也可以通过Rx.Observable.empty()的方式声明，结果不会执行next、error，会执行complete阶段
  • Throw类型Observable直接进入error状态，会在执行过程中抛出异常导致，也可以直接通过Rx.Observable.throw('xxx')的方式声明，结果只会执行error阶段

4.常见工作操作符：do

• do操作符用于在流处理期间对数据进行操作，实例如下

  const interval$ = Rx.Observable.interval(100)
  .do(v => {
      console.log('val is :'+v);    
  })
  .take(3);
  
  

5.常见变换类操作符：scan

• scan(()=>{})接受一个函数，参数1是上次处理后的结果，参数2是新值内容。实例代码

  const interval$ = Rx.Observable.interval(100)
  .filter(v => val%2 === 0) //表示是偶数才放行
  .scan((x,y)=>{return x+y})//表示结果累加操作
  .take(4);
  //输出结果
  // 0[0+0]
  // 2[上次结果0+新值2]
  // 6[上次结果2+新值4]
  // 12[上次结果6+新值6]
  //complete执行内容
  
  

6.常见数学类操作符：reduce

• reduce是将流计算结果做统一的最后处理并发射，实例代码

  const interval$ = Rx.Observable.interval(100)
  .filter(v => val%2 === 0) //表示是偶数才放行
  .take(4)
  .reduce((x,y)=>{return x+y});
  //输出结果
  // 12[只发射最终值]
  
  

7.过滤类操作符：filter、take、first/last、skip…

• take(num)表示取流中前num个

• filter(()=>{})表示对流处理的放行判断，如果满足条件则放行，不满足条件则不放行

  const interval$ = Rx.Observable.interval(100)
  .filter(v => val%2 === 0) //表示是偶数才放行
  .take(3);//订阅后会输出0 2 4
  
  

• first()表示取流第一个，相当于take(1)

• last()表示取流最后一个

• skip(num)表示跳过前num个

  const interval$ = Rx.Observable.interval(100)
  .filter(v => val%2 === 0) //表示是偶数才放行
  .skip(2);//订阅后会输出4 6 8 ...
  
  

8.常见创建类操作符：Interval、Timer

• Interval实例代码

  const interval$ = Rx.Observable.interval(100).take(3);
  interval$.subscribe(
      val => {
          console.log(val) //next状态
      },
      err => {
          console.log(err) // error状态
      },
      ()=> {
          console.log('I am complete') // complete状态
      }
  );
  //输出结果:interval()是做循环用的,每次发射出来的是索引，故生成的是0/1/2/3/4....，又由于take表示取前多少个，故take(3)表示取前3个
  // 0
  // 1
  // 2
  // "I am complete" // complete状态执行的内容
  
  

• Timer实例代码

  const timer$ = Rx.Observable.timer(100,200);//表示100毫秒之后启动，之后以200毫秒的频率一直发送
  // 故timer比Interval多出起始延迟时间的设置
  timer$.subscribe(v=> console.log(v))
  //输出结果
  // 0 --运行后100毫秒之后输出
  // 1 --输出0后200毫秒之后输出
  // 2 --输出1后200毫秒之后输出
  // 3 --...
  
  

9.实例：自行给rxjs中Observable添加debug方法

• 通过Observable的原型中定义debug方法返回Observable对象

  import {Observable} from 'rxjs/Observable';
  import {environment} from '../../environment/environment'
  // typescript用于解决自行添加对象属性的报错问题
  declare module 'rxjs/Observable' {
      interface Observable<T> {
          debug: (...any) => Observable<T>;
      }
  }
  // 给Observable添加debug方法
  Observable.prototype.debug = function(message:string) {
      return this.do(
          (next)=>{
              if(!environment.production) {
                  console.log(message,next)
              }
          },
          (err) => {
              if(!environment.production) {
                  console.error('ERROR>>',message,err);
              }
          },
          ()=> {
              if(!environment.production) {
                  console.log('Completed -');
              }
          }
      )
  }
  //使用时直接在声明Observable期间添加即可以查看对应Observable对象内容,如
  this.http.get('url')
      .debug('Test:')
      .map(res => res.json() as Quote);
  //在subscribe监听后的会输出对应的log
  
  

10.过滤类操作符：debounce、debounceTime

• debounce：比debounceTime灵活，debounceTime只能设定固定的毫秒间隔，而debounce可以通过接受的function设定毫秒间隔

  const length$ = Rx.Observable.fromEvent(length,'keyup').pluck('target','value').debounce(()=>Rx.Observable.interval(300));//可以自行修改function返回内容从而决定滤掉的内容
  //上述代码含义是：过滤掉300毫秒以内keyup事件监听内容
  
  

• debouceTime(num)：时间滤波器，表示只关注大于等于num毫秒间隔的事件内容

  const length$ = Rx.Observable.fromEvent(length,'keyup').pluck('target','value').debounceTime(300);
  //上述代码含义是：过滤掉300毫秒以内keyup事件监听内容
  
  

• 执行图片

  
  在这里插入图片描述

11.过滤类操作符：distinct、distinctUtilChanged

• distinct：整个序列中，过滤一样的，保留不一样的(要求序列中没有重复的元素)

  const length$ = Rx.Observable.fromEvent(length,'keyup').pluck('target','value').distinct();//过滤掉整个流中重复的元素
  
  

• distinctUtilChanged：只跟前一个元素比，过滤一样的，保留不一样的

  const length$ = Rx.Observable.fromEvent(length,'keyup').pluck('target','value').distinctUtilChanged();//过滤掉流中前一个重复的元素
  
  

• 执行图片

  
  在这里插入图片描述

12.合并类操作符：merge、concat、startWith

• merge：在整个序列中按照流运行状态进行合并

• concat：在整个序列中将流前后拼接（如拼接的第一个流是无尽流，则永远只会输出第一个流内容，因为第二个流永远不会发生，第一个流没有执行完）

• startWith：设定流发射的初始值

• 执行图片

  
  在这里插入图片描述

13.合并类操作符：combineLatest、withLatestFrom、zip

在这里插入图片描述

• 通过combineLatest可以对两个流进行对应的处理操作，实例请参照开头计算面积

• zip有对齐的感觉，将两个流对应位置的元素进行处理操作，慢的流决定最终zip生成流的速度

• withLatestFrom当基准流改变时才会进行流处理，使用方式是基准流.withLatestFrom(其他流)，如下

  const merged$ = length$.withLatestFrom(width$);
  
  

• 区别：zip有对齐的特性，withLatestFrom是以源事件流为基准，combineLatest是无论任何一个流发生改变时都会处理