RxJS辅助类操作符学习

1. 数学和聚合类操作符 （Mathematical and Aggregate Operators）

• count：统计数据个数

统计Observable对象个数

import {fromEvent, interval, from} from 'rxjs';
import {count, takeUntil} from 'rxjs/operators';

const seconds = interval(1000);
const clicks = fromEvent(document,'click');
const secondsBeforeClick = seconds.pipe(takeUntil(clicks));
const result = secondsBeforeClick.pipe(count());
result.subscribe(x => console.log(x));

打开页面，如果刚打开就点击页面 x:0, 如果是1s之后打开 x:1,以此类推

统计有几个值是奇数的Observable

import { range } from 'rxjs';
import { count } from 'rxjs/operators';

const numbers = range(1, 7);
const result = numbers.pipe(count(i => i % 2 === 1));
result.subscribe(x => console.log(x));
// 4个

• max和min : 最大最小值

  max和min这两个操作符都可以接受⼀个⽐较函数作为参数,来比较

import { of } from 'rxjs';
import { max ,min} from 'rxjs/operators';

of(5, 4, 7, 2, 8).pipe(
  max()
)
.subscribe(x => console.log(x)); // -> 8
of(5, 4, 7, 2, 8).pipe(
min()
)
.subscribe(x => console.log(x)); // -> 2

const intialReleaseS$ = of(
    {name: 'RxJS', year: 2011},
    {name: 'React', year: 2013},
    {name: 'Redux', year: 2015}
);
const min$ = intialRelease$.min((a, b) => a.year - b.year); 
// { name: RxJS', year: 2011}

• reduce：规约统计

如果需要对上游Observable吐出的所有数据进⾏更加复杂的统计运算，就该⽤reduce这个操作符了. 和JS里面的reduce使用方法很像。

import { fromEvent, interval } from 'rxjs';
import { reduce, takeUntil, mapTo } from 'rxjs/operators';

const clicksInFiveSeconds = fromEvent(document, 'click').pipe(
  takeUntil(interval(5000)),
);
const ones = clicksInFiveSeconds.pipe(mapTo(1));
const seed = 0;
const count = ones.pipe(reduce((acc, one) => acc + one, seed));
count.subscribe(x => console.log(x));

2. 条件布尔类操作符

• every

import { of } from 'rxjs';
import { every } from 'rxjs/operators';

 of(1, 2, 3, 4, 5, 6).pipe(
    every(x => x < 5),
)
.subscribe(x => console.log(x)); // -> false

• find和findIndex

find和findIndex的功能都是找到上游Observable对象中满⾜判定条件的第⼀个数据，产⽣的Observable对象在吐出数据之后会⽴刻完结，两者不同之处是，find会吐出找到的上游数据，⽽findIndex会吐出满⾜判定条件的数据序号

import { fromEvent } from 'rxjs';
import { find } from 'rxjs/operators';
//  查找在div上的第一次点击
const clicks = fromEvent(document, 'click');
const result = clicks.pipe(find(ev => ev.target.tagName === 'DIV'));
result.subscribe(x => console.log(x));

import { fromEvent } from 'rxjs';
import { findIndex } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(findIndex(ev => ev.target.tagName === 'DIV'));
result.subscribe(x => console.log(x));

• isEmpty

isEmpty⽤于检查⼀个上游Observable对象是不是“空的”，所谓“空的”Observable是指没有吐出任何数据就完结的Observable对象。

import { Subject } from 'rxjs';
import { isEmpty } from 'rxjs/operators';
 
const source = new Subject<string>();
const result = source.pipe(isEmpty());
source.subscribe(x => console.log(x));
result.subscribe(x => console.log(x));
source.next('a');
source.next('b');
source.next('c');
source.complete();
 
// a
// false
// b
// c

• defaultEmpty

defaultIfEmpty做的事情⽐empty更进⼀步，除了检测上游Observable对象是否为“空的”，还要接受⼀个默认值（default）作为参数，如果发现上游Observable对象是“空的”，就把这个默认值吐出来给下游；如果发现上游Observable不是“空的”，就把上游吐出的所有东西原样照搬转交给下游。

import { fromEvent } from 'rxjs';
import { defaultIfEmpty, takeUntil } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const clicksBeforeFive = clicks.pipe(takeUntil(interval(5000)));
const result = clicksBeforeFive.pipe(defaultIfEmpty('no clicks'));
result.subscribe(x => console.log(x));

小结

学习了辅助类操作符，有的时候很好用，可以避免重复造轮子。