RxJS auxiliary class operators learn

1. Mathematical operator of the class and the polymerization (Mathematical and Aggregate Operators)

• count: the number of statistical data

Observable statistics the number of objects

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));

Open the page, if you just open the page, click x: 0, if it is open after 1s x: 1, and so on

There are several statistical value is odd 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 and min: maximum and minimum

  both max and min operators may be more acceptable as a function ⽐ ⼀ a parameter to compare

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: Statute Statistics

If all the data required for discharge into upstream Observable ⾏ more complex statistical operation, reduce the operator in respect of Use. JS and reduce use inside like.

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. Conditions Boolean operator of the class

• 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 and findIndex

findIndex find and functions are found upstream Observable subject underexposure full determination condition data of the first frame, associate the resulting Observable object after discharge end immediately while data is, difference between the two is that, the discharge will find an upstream data found , ⽽ findIndex spit full EMPTY condition data number determination

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

Using the inspection ⼀ isEmpty upstream Observable objects are not "empty", the so-called "empty" means that no ejection Observable Observable data objects to the end of any.

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 do ⽐ empty goes ⼀ step, in addition to detecting whether upstream Observable object "empty", but also to accept ⼀ a default value (default) as the parameter, if it is found upstream Observable objects are "empty" and put the default spit to the downstream; upstream Observable If all things are not "empty", put upstream of the discharge toto transferred to downstream.

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));

summary

Learning auxiliary operator of the class, sometimes useful, to avoid duplication of-create the wheel.