RxJS 中使用 filter 操作符剔除无用的数据流

RxJS 中使用 filter 操作符剔除无用的数据流

在前端开发中，我们经常需要处理各种流形式的数据，比如 Ajax 请求、WebSocket 消息等。RxJS 是一个非常优秀的支持流处理的库，我们可以使用它来优雅地处理数据流。RxJS 提供了各种操作符来对流进行处理，其中 filter 操作符是一种非常常用的操作符。

filter 操作符可以过滤掉不符合条件的数据元素，只保留符合条件的数据元素。它的原型如下：

filter<T>(predicate: (value: T, index: number, source: Observable<T>) => boolean, thisArg?: any): Observable<T>

filter 接收一个函数作为参数，这个函数用来判断是否保留这个数据元素。函数返回 true，则保留这个数据元素；否则，过滤掉这个数据元素。

下面是一个简单的示例，演示了如何使用 filter 操作符来过滤掉比 50 小的元素：

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

const source$ = from([10, 20, 30, 40, 50, 60, 70, 80, 90, 100]);
const result$ = source$.pipe(filter(item => item > 50));
result$.subscribe(console.log);

代码中，我们首先使用 from 操作符将一个数组转成一个 Observable 对象。然后，调用 pipe 方法并传入 filter 操作符来过滤不符合条件的元素。最后，订阅结果，并将结果打印到控制台。

除了接收一个函数作为参数以外，filter 操作符也可以接收一个正则表达式作为参数，来过滤符合正则表达式的元素。下面是一个演示如何过滤出所有字符串中包含 "RxJS" 的示例：

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

const source$ = from(['Hello, RxJS!', 'Goodbye, RxJS!', 'Welcome, Angular!', 'RxJS is awesome!', 'RxJS is cool']);
const regex = /RxJS/;
const result$ = source$.pipe(filter(item => regex.test(item)));
result$.subscribe(console.log);

在实际开发中，filter 操作符常常与其他操作符结合使用，从而实现更复杂的数据处理流程。比如，我们可以使用 map 操作符将源数据中的某个字段取出来，然后通过 filter 操作符来筛选出符合指定条件的数据。下面是一个示例：

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

const source$ = of(
  { name: '张三', age: 21 },
  { name: '李四', age: 22 },
  { name: '王五', age: 23 },
);

const result$ = source$.pipe(
  map(person => person.age),
  filter(age => age > 22),
);
result$.subscribe(console.log);

代码中，我们首先使用 of 操作符将一个对象序列转成一个 Observable 对象。然后，使用 map 操作符来将对象中的 age 字段提取出来，变成一个数字的 Observable。最后，使用 filter 操作符将数字序列中小于 22 的数据过滤掉。最终结果为 23。

总结

filter 操作符是 RxJS 中非常常用的操作符，它可以用来过滤不符合条件的数据元素，只保留符合条件的数据元素。我们可以使用函数或正则表达式来指定过滤条件，也可以与其他操作符结合使用来得到更复杂的数据处理流程。在实际项目中，应该深刻理解 filter 操作符的作用，避免滥用造成性能问题。

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