rxjs-过滤操作符

1. filter

过滤操作符，和数组和filter方法类似

案例，取出能被2整除的数据

import { interval } from 'rxjs';
import { filter } from "rxjs/operators";
interval(1000).pipe(
  filter(x=>x%2==0)
).subscribe(x=>console.log(x))

2. first

只要第一个数据

import { of } from 'rxjs';
import { first } from "rxjs/operators";
of(1,2,3,4).pipe(
  first()
).subscribe(x=>console.log(x),e=>{},()=>{
  console.log("complete")
})

3. last

只要最后一个元素

import { of } from 'rxjs';
import { last } from "rxjs/operators";
of(1,2,3,4).pipe(
  last()
).subscribe(x=>console.log(x))

4. take

取前n个

import { interval } from 'rxjs';
import { take } from "rxjs/operators";
interval(1000).pipe(
  take(3)
).subscribe(x=>console.log(x),e=>{},()=>{
  console.log("complete")
})

5. takeLast

取后n个

import { of } from 'rxjs';
import { takeLast } from "rxjs/operators";
of(1,2,3,4,5,6,7,8).pipe(
  takeLast(3)
).subscribe(x=>console.log(x))

6. takeUntil

取前n个，类似于take,但是结束的标识不是个数，而是内部源发射第一个数据

案例，取前n个，当点击页面的时候结束

import { interval, fromEvent } from 'rxjs';
import { takeUntil } from "rxjs/operators";
interval(1000).pipe(
  takeUntil(fromEvent(document,"click"))
).subscribe(x => console.log(x))

7. takeWhile

取前n个，当不满足要求时结束

import { interval } from 'rxjs';
import { takeWhile } from "rxjs/operators";
interval(1000).pipe(
  takeWhile(x=>x<5)
).subscribe(x => console.log(x))

8. skip

跳过前几个

import { interval } from 'rxjs';
import { skip } from "rxjs/operators";
interval(1000).pipe(
  skip(3)
).subscribe(x => console.log(x))

9. skipLast

省略后几个

import { of } from 'rxjs';
import { skipLast } from "rxjs/operators";
of(1,2,3,4).pipe(
  skipLast(2)
).subscribe(x => console.log(x))

10. skipUntil

意思类似于takeUntil，跳过前n个，当内部源发射数据时开始发射数据

案例：当点击页面是开始发射数据

import { interval, fromEvent } from 'rxjs';
import { skipUntil } from "rxjs/operators";
interval(1000).pipe(
  skipUntil(fromEvent(document,"click"))
).subscribe(x => console.log(x))

11. skipWhile

意思类似于takeWhile，当出现第一个不满足的数据时结束跳过开始发射数据，之后的数据不再验证

import { of } from 'rxjs';
import { skipWhile } from "rxjs/operators";
of(1,2,3,4,3,2,1).pipe(
  skipWhile(x=>x<4)
).subscribe(x => console.log(x))

12. distinct

发射与之前所有发射过的数据不一样的数据。可以传一个函数，返回比较的值

//按照对象本身比较不用传递函数
import { of } from 'rxjs';
import { distinct } from "rxjs/operators";
of(1,1,1,2,2,3,3,4,5,6,4,3).pipe(
  distinct()
).subscribe(x => console.log(x))


//按照对象的某个属性比较，需要传递函数
import { of } from 'rxjs';
import { distinct } from "rxjs/operators";
of({id:1,age:12},{id:1,age:12},{id:1,age:12},{id:2,age:12}).pipe(
  distinct(x=>x.id)
).subscribe(x => console.log(x))

13. distinctUntilChanged

和distinct类似，只不过distinct是全局比较不同，而distinctUntilChanged是只和上一个数据比较。

可以传递函数用于复杂对象的比较

//按照对象本身比较不用传递函数
import { of } from 'rxjs';
import { distinctUntilChanged } from "rxjs/operators";
of(1,2,3,3,3,2,1,1,2).pipe(
  distinctUntilChanged()
).subscribe(x => console.log(x))

//按照对象的某个属性比较，需要传递函数
import { of } from 'rxjs';
import { distinctUntilChanged } from "rxjs/operators";
of({id:1,age:12},{id:1,age:12},{id:2,age:12}).pipe(
  distinctUntilChanged((x,y)=>x.id==y.id)
).subscribe(x => console.log(x))

14. distinctUntilKeyChanged

是distinctUntilChanged中对象属性比较的简化写法

import { of } from 'rxjs';
import { distinctUntilKeyChanged } from "rxjs/operators";
of({id:1,age:12},{id:1,age:12},{id:2,age:12}).pipe(
  distinctUntilKeyChanged("id")
).subscribe(x => console.log(x))

15. elementAt

取索引为n的元素，索引从0开始

import { of } from 'rxjs';
import { elementAt } from "rxjs/operators";
of(1,2,3,4).pipe(
  elementAt(3)
).subscribe(x => console.log(x))

16. ignoreElements

忽略所有数据，不发射数据。唯一的用户就是用来触发complete或者error。

import { of } from 'rxjs';
import { ignoreElements } from "rxjs/operators";
of(1,2,3,4).pipe(
  ignoreElements()
).subscribe(x => console.log(x),err=>{},()=>console.log('complete'))

17. single

用来保证有且只有一个元素发射出来，如果没有元素或者多余1个元素发射出来那么会报错。

import { of } from 'rxjs';
import { single } from "rxjs/operators";
of(1).pipe(
  single()
).subscribe(x => console.log(x),err=>{console.error(`error:${err}`)},()=>console.log('complete'))

of().pipe(
  single()
).subscribe(x => console.log(x),err=>{console.error(`error:${err}`)},()=>console.log('complete'))

of(1,2,3).pipe(
  single()
).subscribe(x => console.log(x),err=>{console.error(`error:${err}`)},()=>console.log('complete'))