深入理解RxJS first 操作符：区分发射值与数组元素-js教程-PHP中文网

深入理解RxJS first 操作符：区分发射值与数组元素

碧海醫心

发布： 2025-10-23 11:58:26

原创

819人浏览过

深入理解rxjs first 操作符：区分发射值与数组元素

本教程深入探讨RxJS `first` 操作符的行为，重点解析其如何根据可观察对象发射的“值”来工作。我们将通过对比 `Observable.next` (或 `of`) 发射整个数组与 `from` 逐个发射数组元素这两种场景，揭示 `first` 操作符返回整个数组或单个元素的原因。此外，还将介绍如何结合 `mergeAll` 等操作符，实现对发射数组内部元素的“首个”提取。

RxJS 中的 first 操作符是一个常用的过滤操作符，它用于从源 Observable 中发出第一个值，然后完成。如果源 Observable 在完成前没有发出任何值，first 将会抛出一个错误（除非提供了默认值或 first 操作符被用于空源）。理解 first 操作符的关键在于其作用对象是 Observable 所“发射”的每一个独立值，而非这些值内部的结构。

first 操作符的工作原理

first 操作符的核心逻辑是捕获并发出源 Observable 发出的第一个数据项。这个“数据项”可以是任何类型，包括数字、字符串、对象，甚至是数组。一旦第一个数据项被发出，first 操作符就会立即完成，并取消对源 Observable 的订阅。

场景一：Observable 发射整个数组作为一个单一值

当一个 Observable 通过 next 方法发射一个数组时，例如 s.next([1,2,3,4])，或者使用 of 创建操作符发射一个数组 of([1,2,3,4])，RxJS 会将这个 整个数组 [1,2,3,4] 视为一个完整的、单一的值。在这种情况下，first 操作符会捕获并发出这个完整的数组，因为它是源 Observable 发出的第一个（也是唯一一个）值。

考虑以下代码示例：

import { Observable } from 'rxjs';
import { first } from 'rxjs/operators';

new Observable<number[]>(s => {
  s.next([1, 2, 3, 4]); // 发射整个数组作为一个单一值
  s.complete();        // 完成 Observable
}).pipe(
  first()
).subscribe({
  next: (response) => console.log('场景一输出:', response),
  complete: () => console.log('场景一完成')
});
// 预期输出: 场景一输出: [1,2,3,4]
// 预期输出: 场景一完成

登录后复制

在这个例子中，new Observable 实例只调用了一次 s.next()，并且传入的是一个包含四个数字的数组。对于 first 操作符而言，它接收到的第一个“值”就是这个 [1,2,3,4] 数组。因此，它会直接将这个数组传递给 subscribe 的 next 回调函数。

场景二：Observable 逐个发射数组元素

与上述情况不同，RxJS 提供了 from 创建操作符，它能够将一个数组、Promise 或其他可迭代对象转换为一个 Observable，并逐个发射其内部的元素。当 from([1,2,3,4]) 被使用时，它会首先发射 1，然后发射 2，以此类推。

当 first 操作符应用于这种类型的 Observable 时，它会捕获并发出源 Observable 发出的第一个 独立元素。

如此AI写作

AI驱动的内容营销平台，提供一站式的AI智能写作、管理和分发数字化工具。

137

查看详情

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

from([1, 2, 3, 4]).pipe(
  first()
).subscribe({
  next: (res) => console.log('场景二输出:', res),
  complete: () => console.log('场景二完成')
});
// 预期输出: 场景二输出: 1
// 预期输出: 场景二完成

登录后复制

在这个例子中，from([1,2,3,4]) 会将数组中的 1 作为第一个值发射，紧接着是 2、3、4。而 first() 操作符在接收到 1 之后就会立即完成，因此只有 1 被打印出来。

解决方案：使用 mergeAll 扁平化发射的数组

如果你有一个 Observable 像场景一那样发射整个数组，但你希望 first 操作符能够作用于这个数组内部的元素（即你想得到数组的第一个元素 1），你就需要先将这个发射的数组“扁平化”成一个发射单个元素的流。mergeAll 操作符可以帮助我们实现这一点。

mergeAll 操作符会订阅源 Observable 发出的每个内部 Observable（或可迭代对象），并将它们发出的值合并到主 Observable 流中。当源 Observable 发射一个数组时，mergeAll 会将该数组视为一个可迭代对象，并逐个发射其内部的元素。

以下是如何结合 mergeAll 和 first 来实现预期行为的示例：

import { of } from 'rxjs';
import { first, mergeAll } from 'rxjs/operators';

of([1, 2, 3, 4]).pipe(
  mergeAll(), // 将发射的数组 [1,2,3,4] 扁平化为 1, 2, 3, 4 的流
  first()     // 获取扁平化后流的第一个元素
).subscribe({
  next: (response) => console.log('扁平化后输出:', response),
  complete: () => console.log('扁平化后完成')
});
// 预期输出: 扁平化后输出: 1
// 预期输出: 扁平化后完成

登录后复制

在这个修改后的代码中，of([1,2,3,4]) 仍然发射整个数组。但是，mergeAll() 操作符介入，它将这个数组内部的元素 1, 2, 3, 4 逐个推送到流中。此时，first() 操作符接收到的第一个值就是 1，从而实现了提取数组内部第一个元素的目的。

注意事项与总结

理解“发射值”的含义：RxJS 操作符（包括 first）是基于 Observable 发出的“值”来工作的。一个数组，如果作为整体被 next 或 of 发射，那么它就是一个单一的“值”。
of 与 from 的区别：
- of(val1, val2, ...)：发射提供的所有参数作为独立的、顺序的值。如果参数本身是一个数组，它就发射这个数组作为一个值。
- from(iterable)：遍历可迭代对象（如数组），并逐个发射其内部的元素。
扁平化操作符：当需要处理 Observable 发射的“值”内部的结构时（例如从发射的数组中提取元素），需要使用扁平化操作符，如 mergeAll、concatAll 或 switchAll。
first(predicate)：first 操作符还可以接受一个谓词函数作为参数，它会发出第一个满足该谓词条件的元素。同样，这个谓词是作用于 Observable 发出的每一个“值”上。