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

蚂蚁PPT

AI在线智能生成PPT

113 查看详情

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 操作符：区分发射值与数组元素的详细内容，更多请关注其它相关文章！

# 作为一个  # 电影推广营销好做吗工资  # 事件营销推广矩阵分析  # 重庆主城家电网站建设  # 济源网站建设在线招聘  # 黄石seo优化费用低  # 长治品牌网站建设  # 正阳网站推广价格怎么样  # 图片网站优化技巧  # 中山网站如何优化  # seo优化大师哪家专业  # 鼠标  # 就会  # js  # 在这个  # 它会  # 迭代  # 是一个  # 回调  # 扁平化  # 第一个  # red  # 可迭代对象  # 区别  # switch  # 回调函数 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： 汽水音乐在线入口 汽水音乐网页端官方页面快速打开  《波斯王子：失落的王冠》剑术大师打法攻略  C++中std::thread和std::async的区别_C++并发编程与线程与异步任务比较  米侠浏览器插件无法启用怎么办 米侠浏览器扩展兼容性修复  iPhone 15 Pro如何查看存储空间占用_iPhone 15 Pro存储空间查看教程  纯CSS实现滚动时动态时间轴线条颜色填充效果  cad加载的线型看不见怎么办_cad线型不可见问题解决方法  网易云音乐闹钟铃声设置教程  《暗黑破坏神4》国服回归送狂欢礼包 价值6916元  VB表达式书写规则解析  汽车之家网页版免费登录_汽车之家官网首页直接进入  繁花漫画使用教程  PHP utf8_encode 字符编码转换陷阱与解决方案  大众点评了却看不到是怎么回事  Win11怎么录屏_Windows 11自带Xbox Game Bar录制视频  mysql如何回滚事务_mysql ROLLBACK事务回滚方法  《三角洲行动》战斗步枪与机枪类改装代码分享  Google Cloud Functions 时区处理指南：理解与最佳实践  TikTok视频播放不流畅怎么办 TikTok视频播放优化方法  《鹿路通》退余额方法  支付宝网页版在线入口 支付宝官网电脑登录入口  J*aScript二进制处理_ArrayBuffer与Blob  抖音评论无法发送如何修复 抖音评论功能操作指南  邮政快递寄件查询入口 邮政快递收件查询入口  《三国：谋定天下》平民全阶段通用阵容  todesk如何添加信任设备_todesk信任设备设置教程  猫眼app抢票快还是小程序快  解决异步Python机器人中同步操作的阻塞问题  从J*a应用程序中导出MySQL表数据的技术指南  mysql如何限制远程访问_mysql远程访问限制方法  msn官方入口2025登录 msn官网2025直达首页入口  微星主板BIOS怎么调整内存时序_内存参数手动优化BIOS设置教程  Animex动漫社社登录官网 Animex动漫社资源社入口直达  优酷官网登录入口电脑版 优酷官网网址入口  包子漫画在线观看入口 包子漫画网正版全集链接  c++中的const关键字用法大全_c++ const正确使用指南  《咸鱼之王》新版孙坚技能解析  VS Code中的Tailwind CSS IntelliSense插件使用技巧  邮编号码查询app有哪些_邮编号码查询推荐app及使用体验  mysql离线安装后如何启动_mysql离线安装完成后启动服务的方法  《大周列国志》皇帝律令功能介绍  AO3中文版手机快速通道_AO3最新稳定链接更新  Chart.js 教程：自定义插件实现图表与图例间距调整  Win10如何彻底关闭OneDrive Win10禁用云同步功能【纯净】  《搜书吧》阅读书籍方法  word邮件合并怎么插入个性化图片_Word邮件合并插入个性化图片方法  TikTok网页版实时观看入口 TikTok网页版短视频在线浏览  PHP 4 函数中引用参数的默认值限制与解决方案  Go Template中优雅处理循环最后一项：自定义函数实践  火狐浏览器如何刷新修复浏览器 火狐浏览器“重置Firefox”功能详解 

 2025-10-23