RxJS过滤数据流操作符学习 (Filtering Operators)

# 前端 2024-05-05 06:31 0 27 来源：云博客

1. 过滤类操作符的模式

很多时候，上游Observable对象吐出的数据，并不是下游关心的，这个时候我们需要把不需要的数据，过滤掉。在RxJS中，提供了这类过滤操作符来实现这种功能。

过滤类操作符最基本的功能就是对一个给定的数据流中的每个数据判断是否满足某个条件，如果满足就传递给下游，如果不满足就抛弃。

判断一个数据是否有资格进入下游，是根据 “判定函数”的返回值， true代表可以进入下游，否则就会被淘汰。

有的过滤类操作符还可以接受一个函数参数“结果选择器”，用来制定数据给下游，比如：

function resultSelector(value,index){ return [value,index]}

filter

和Array.prototype.filter()很像，看一下使用方法, filter 只能做过滤，不能做结果转化

import {fromEvent} from 'rxjs';import {filter} from 'rxjs/operators';const clicks = fromEvent(document,'click'); const clicksOnDivs = clicks.pipe(filter(ev=>ev.target.tagName === "DIV"))clicksOnDivs.subscribe(x=>console.log(x));// MouseEvent?{isTrusted: true, screenX: 98, screenY: 207, clientX: 98, clientY: 103,?…}

first和last
first 方法可以接受2个参数，分别是判定函数，没有值得时候，传给下游的值。
first 没有判定函数的时候，吐出第一个符合条件的值。

import {fromEvent} from 'rxjs';import {filter,first} from 'rxjs/operators';const clicks = fromEvent(document,'click');const clicksOnDivs = clicks.pipe( first(ev=>ev.target.tagName === "DIV") // first())clicksOnDivs.subscribe(x=>console.log(x));

take 一族操作符
take就是“拿”，从上游Observable拿数据，拿够了就完结，?于怎么算“拿够”，由take的参数来决定，take只?持?个参数count，也就是限定拿上游Observable的数据数量。

import { interval } from 'rxjs';import { take } from 'rxjs/operators'; const intervalCount = interval(1000);const takeFive = intervalCount.pipe(take(5));takeFive.subscribe(x => console.log(x));// 0// 1// 2// 3// 4

take的其他兄弟

takeLast : 上游结束之后，从后面开始拿数据。
takeWhile ：接受一个判定函数，通过判定函数拿数据。
takeUntle ：
takeUntil

import { fromEvent, interval } from 'rxjs';import { takeUntil } from 'rxjs/operators';const source = interval(1000);const clicks = fromEvent(document, 'click');const result = source.pipe(takeUntil(clicks));result.subscribe(x => console.log(x));// 0 1 2 遇到click就停止。

skip：跳过前面count个数据，接受一个参数count：number
skipWhile 和 skipUntil
skipWhile 和takeWhile一样接受一个判定函数

import { interval, fromEvent } from 'rxjs';import { skipUntil } from 'rxjs/operators'; const intervalObservable = interval(1000);const click = fromEvent(document, 'click'); const emitAfterClick = intervalObservable.pipe( skipUntil(click));// clicked at 4.6s. output: 5...6...7...8........ or// clicked at 7.3s. output: 8...9...10..11.......const subscribe = emitAfterClick.subscribe(value => console.log(value));