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

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 发出的第一个 独立元素。

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 发出的每一个“值”上。

通过本文的讲解，希望您能更清晰地理解 RxJS first 操作符在不同场景下的行为，并能根据实际需求灵活运用 of、from 和 mergeAll 等操作符来构建健壮的响应式程序。

以上关于详解RxJS first 操作符：区分发射值与数组元素的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。