本教程深入探讨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(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 操作符：区分发射值与数组元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531875.html
微信扫一扫 
支付宝扫一扫 
