RxJS 是一个流式编程库，用于处理异步、事件或其他数据流的组合和操作。在 Angular 中，RxJS 是一个核心依赖项，用作处理观察者模式（Observable）的桥梁。本文将介绍 RxJS 的基本概念和在 Angular 中使用 RxJS 进行订阅内容过滤的示例。
RxJS 基础概念
在使用 RxJS 之前，有几个与 RxJS 相关的基本概念需要了解。
观察者
观察者是一个函数，它被用来处理从 Observable 发送的数据流。通过传递给 Observable 的订阅（subscribe）方法来创建观察者。例如：
const observer = {
next: x => console.log(x),
error: err => console.error(err),
complete: () => console.log('done')
};
observable.subscribe(observer);这里使用了一个对象来定义观察者。它包含三个函数：next、error 和 complete。当 Observable 发送数据、发生错误或完成时，分别调用这三个函数。在这个例子中，观察者只是简单地将数据打印到控制台。
Observable
Observable 代表一个数据流，它可以被订阅以获取从流中发出的数据。它可以发出零个、一个或多个数据项，也可以发出错误和完成信号。
例如，以下代码创建了一个每秒发出一个递增数字的 Observable：
const observable = interval(1000);
这个 Observable 会每过 1000 毫秒向其所有订阅者发出一个数字。这个数字是自动递增的，从 0 开始。
操作符
RxJS 有很多操作符，它们可以用来变换、过滤、聚合或者操作 Observable 中的数据。这些操作符包括 map、filter、reduce、concat、merge 等等。这些功能让使用 RxJS 更加容易和高效。例如：
const observable = from([1, 2, 3, 4, 5]); observable.pipe( filter(x => x > 2), map(x => x * 2), ).subscribe(console.log);
这段代码创建了一个 Observable，它发出一个包含数字 1 到 5 的数据流，并使用 filter 和 map 操作符过滤和变换了这个数据流。
在 Angular 中使用 RxJS 筛选订阅内容
在 Angular 中，我们经常需要订阅一个 Observable 来获取服务数据或者 UI 事件。在一些情况下，我们可能只对 Observable 发出的部分数据感兴趣，这时，我们需要通过操作符来筛选订阅内容。
例如，假设我们有一个服务，服务每秒发出一个带时间戳的字符串，例如 "2022-05-29 14:39:52"。我们只想订阅有 0 或者 5 结尾的时间戳。那么我们可以使用 filter 操作符来过滤 Observable：
import { interval } from 'rxjs';
import { filter, map } from 'rxjs/operators';
const observable = interval(1000).pipe(
map(() => this.getCurrentTime()),
filter(time => /0$|5$/.test(time.substr(-1))),
);getCurrentTime 是一个获取当前时间的函数，这里不再赘述。使用 filter 操作符可以只订阅符合条件的时间戳。
此外，有时候我们需要对 Observable 发出的数据做进一步处理，或者将多个 Observable 合并成一个。这时候，我们可以使用 map 或者 merge 等操作符，做一些高级的操作。例如：
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ------- ---- -------- - ---- ----------------- ----- ----------- - --------------- ----- ----------- - --------------- ----------------- ------ -- --------------------------- ---------- -- --- -------- -- - - - --- --- -------------------------
这段代码将两个 Observable 合并起来，并只保留其中偶数项。
结论
RxJS 为我们提供了一种简单、高效的方式来处理异步和事件数据流，简化了很多 Angular 应用的代码流程。通过使用 filter、map 等操作符，我们可以对 Observable 发出的数据进行筛选和转换。这些操作符在 Angular 中使用广泛，深入了解和熟练使用它们会大大提高开发效率。
示例代码：
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ------- --- - ---- ----------------- ----- ---------- - -------------------- ------ -- ----------------------- ----------- -- ------------------------------- -- ----------------------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703396ed91dce0dc84a71bb