RxJS 中的 filter 操作符：什么是它以及如何使用它

RxJS 是一个流式编程库，它被广泛用于前端开发中。在 RxJS 中，filter 操作符是一个非常有用的工具，它可以帮助我们筛选流中的数据。本文将介绍 filter 操作符的使用方法和实例代码，并带给您深入了解 RxJS 的机会。

什么是 filter 操作符

在 RxJS 中，filter 操作符是一个函数，它可以处理发射到流中的数据。这个操作符会返回一个新的流，其中只包含符合过滤条件的数据。所以，filter 操作符的主要作用是过滤掉不需要的数据，只留下符合我们需要的数据。

filter 操作符语法如下：

stream.filter(callback[, thisArg])

其中 callback 是过滤条件的回调函数，thisArg 为可选参数，它表示在回调函数中 this 的值。

如何使用 filter 操作符

下面是一个示例程序，它演示了如何使用 filter 操作符。

首先，我们创建一个 Observable 对象：

import { interval } from 'rxjs';

const source$ = interval(1000);

这里的 interval(1000) 表示每隔 1000 毫秒发出一个数字。

接下来，我们可以使用 filter 操作符来过滤掉一些数字。示例代码如下：

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

const source$ = interval(1000);

const filtered$ = source$.pipe(
  filter(num => num % 2 === 0)
);

filtered$.subscribe(num => console.log(num));

这段代码中，我们使用了 filter 操作符来筛选出偶数数字，筛选条件为 num % 2 === 0。在代码中，我们将 filter 操作符放在了 pipe 中，这表示我们对 Observable 对象进行了一系列的操作。筛选出的数据将会被发射到 filtered$ 的流中，我们可以通过 subscribe() 方法来打印流中的数据。

实例

为了更好地理解 filter 操作符，下面我们来看一个更具体的实例。

假设我们有一个数组，数组中包含若干个数字。我们要使用 RxJS 来过滤掉其中的奇数数字，并打印出过滤后的结果。

首先，我们需要将数组转换成 Observable 对象：

import { from } from 'rxjs';

const source$ = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

接下来，我们可以使用 filter 操作符来过滤掉奇数数字，示例代码如下：

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

const source$ = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

const filtered$ = source$.pipe(
  filter(num => num % 2 === 0)
);

filtered$.subscribe(num => console.log(num));

在这段代码中，我们使用 from() 方法来将数组转换成 Observable 对象。接下来，我们使用 filter 操作符来过滤掉奇数数字，筛选条件为 num % 2 === 0。最后，我们可以使用 subscribe() 方法来打印过滤后的结果。

总结

filter 操作符是 RxJS 中的一个非常有用的工具，它可以帮助我们筛选流中的数据。在本文中，我们介绍了 filter 操作符的使用方法和示例代码，并希望能够带给您深入了解 RxJS 的机会。如果您正在学习 RxJS，那么 filter 操作符一定要学好哦！

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3e003add4f0e0ffc0f367