RxJS過濾數據流操作符學習 (Filtering Operators)

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

2. 回壓控制

所謂的回壓控制，可以理解為上游的數據比較多，流入下流的時候，由於太多了，造成了擁堵，為了能夠流暢的流到下游，拋棄一些數據。
通過損失掉一些數據讓流入和處理的速度平衡。
Rxjs提供了操作符來實現有損的回壓控制，就是解決丟棄以及如何丟棄數據。

• throttle 和 debonuce、audit、sample

• auditTime 和 audit

• sampleTime 和 sample

3. 其他過濾方式

• ignoreElements
• elementAt
• signal