rxjs 里 filter Operator 的使用举例

RxJS 是一个功能强大的库，可用于使用异步编程。Angular 开发人员广泛应用 RxJS 满足适应复杂的异步操作处理需求。RxJS 提供了各种操作符，以便开发人员能够更有效地处理数据流。filter 操作符就是其中之一，用于过滤 Observable 流中的数据项。

在 RxJS 中，filter 操作符能够通过指定的谓词函数对数据流进行筛选，只允许符合条件的数据项通过。filter 操作符是基于“过滤”思想的极佳实现，类似于数组上的 filter 方法，但其适用于 Observable 数据流。因此，当开发人员需要从一系列可能的数据项中筛选出符合某些特定条件的数据项时，可以使用 filter 操作符。

filter 操作符的使用场合：

一、有时应用程序会接收大量的数据流，但只需要其中的一部分。例如，假设一个实时数据流包含不同类型的事件，而你只需要某种特定类型的事件。这种场景下，filter 操作符可以派上用场。

二、有时需要在用户输入过程中按需筛选输入，例如监听表单输入，只对长度大于一定值的输入进行操作。

三、有时你可能需要对频繁的事件进行去噪，即过滤掉短时间内频繁触发的事件。例如，在处理鼠标点击事件时，你可能只对特定的点击位置或点击类型感兴趣。

示例实现：

import { fromEvent } from 'rxjs';
import { filter, map } from 'rxjs/operators';

// 假设有一个按钮，id 为 `myButton`
const button = document.getElementById('myButton');

const clicks = fromEvent(button, 'click');

const filteredClicks = clicks.pipe(
  filter((event: MouseEvent) => event.clientX > 100)
);

filteredClicks.subscribe((event) => {
  console.log('Clicked at:', event.clientX, event.clientY);
});

在上述示例中，fromEvent 操作符用来监听按钮的 click 事件，并返回一个 Observable。接着，我们使用 filter 操作符对 click 事件进行过滤，只保留 clientX 属性大于 100 的点击事件。最后，subscribe 方法用于订阅这个过滤后的 Observable，并将过滤后的事件打印到控制台。

filter 操作符处于 RxJS 操作符体系中的位置：

RxJS 提供了丰富的操作符，可以归类为变换操作符、过滤操作符、组合操作符等。filter 操作符自然归类为过滤操作符。它的主要作用是通过提供的谓词函数筛选数据流中的事件，忽略不符合条件的事件，并将符合条件的事件传递到下一个操作步骤。

进一步的应用场景：

1. 表单输入验证：

import { fromEvent } from 'rxjs';
import { filter, map } from 'rxjs/operators';

// 监听表单输入事件
const input = document.getElementById('myInput');
const inputEvents = fromEvent(input, 'input');

const filteredInput = inputEvents.pipe(
  map((event: InputEvent) => (event.target as HTMLInputElement).value),
  filter(value => value.length > 3), // 只保留长度大于 3 的输入
);

filteredInput.subscribe((value) => {
  console.log('Valid input:', value);
});

这个示例展示了如何通过 filter 操作符实现表单输入长度验证。这里我们监听 input 元素的 input 事件，利用 map 操作符将事件映射为输入的值，并通过 filter 操作符筛选出长度大于 3 的输入。

2. 基于用户角色做权限判断：

假设有一个数据流包含用户的事件或操作，而你只希望处理管理员用户的操作。filter 操作符能够帮助实现这一需求。

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

interface User {
  id: number;
  name: string;
  role: string;
}

const users = of(
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' },
  { id: 3, name: 'Charlie', role: 'admin' }
);

const adminUsers = users.pipe(
  filter(user => user.role === 'admin'), // 只保留管理员用户
);

adminUsers.subscribe((user) => {
  console.log('Admin user:', user.name);
});

这段代码中，我们创建了一个包含用户信息的数据流，并通过 filter 操作符筛选出角色为 admin 的用户，订阅后打印其用户名。

3. 温度传感器数据过滤：

假设有一个温度传感器，每秒采样一次温度数据，而你只希望处理温度高于 30 度的数据。

import { interval } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// 模拟温度传感器，每秒发出一个温度值
const temperatures = interval(1000).pipe(
  map(value => {
    const randomTemperature = Math.floor(Math.random() * 50); // 0 到 49 之间的随机温度
    console.log('Raw temperature:', randomTemperature);
    return randomTemperature;
  })
);

const highTemperatures = temperatures.pipe(
  filter(temp => temp > 30) // 只保留温度大于 30 的数据
);

highTemperatures.subscribe((temp) => {
  console.log('High temperature:', temp);
});

这个示例模拟了一个温度传感器，每秒钟生成一个随机温度。通过 filter 操作符筛选出温度高于 30 的数据，并对这些数据进行处理。

总结和补充说明：

filter 操作符在 RxJS 中的应用场景广泛，能够很好地满足数据流筛选的需求。通过在 Observable 流中应用复杂逻辑实现数据过滤 filter 操作符极具扩展性和灵活性。无论表单验证、权限控制还是传感器数据处理，都可通过 filter 操作符轻松实现。

此外，为了更好的使用 filter 操作符，需要对以下几点有所了解：

• 谓词函数：filter 操作符依赖于用户提供的谓词函数，根据该函数的返回值来判断是否保留数据项。谓词函数接受 observable 的数据项作为参数，并返回 boolean 值。
• 组合使用：filter 操作符通常与其他 RxJS 操作符组合使用，从而形成更强大的数据流处理逻辑。例如与 map、mergeMap 等操作符结合，能够实现复杂的数据流加工。

import { fromEvent } from 'rxjs';
import { filter, map, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const input = document.getElementById('search');

const search$ = fromEvent(input, 'input').pipe(
  map((event: InputEvent) => (event.target as HTMLInputElement).value),
  debounceTime(300),
  distinctUntilChanged(),
  filter((term: string) => term.trim().length > 2),
  switchMap((term: string) => ajax.getJSON(`https://api.example.com/search?query=${term}`))
);

search$.subscribe((results) => {
  console.log('Search results:', results);
});

在这个示例中，我们通过组合多个操作符实现了一个搜索功能：对 input 事件应用 map 转换，使用 debounceTime 进行防抖，distinctUntilChanged 确保只有输入内容变化时才继续处理，使用 filter 确保输入长度大于 2，最后使用 switchMap 将输入转换为 HTTP 请求并获取结果。

filter 操作符在 RxJS 中的广泛应用领域，从简单的数据流过滤到复杂应用的异步数据处理，其重要性不言而喻。通过对其充分理解和灵活运用，开发者能够构建出更加健壮和灵活的前端应用。