深入理解 RxJS first 操作符：区分值发射模式

---

RxJS 的 `first` 操作符用于获取 Observable 发射的第一个值。其行为差异主要取决于 Observable 如何发射数据：是作为一个整体的数组值，还是将数组元素逐个扁平化发射。理解 `of()` 与 `from()` 等创建操作符的区别，以及如何利用 `mergeAll()` 等操作符进行扁平化处理，是正确使用 `first` 的关键，避免对数组内容产生误解。

RxJS first 操作符基础

first 操作符的本质是获取源 Observable 产生的第一个值。它可以不带参数，直接返回第一个发射的值；也可以接受一个谓词函数，返回第一个满足该谓词条件的值。一旦找到并返回了相应的值，first 操作符就会完成源 Observable 的订阅，并发出 complete 通知。

例如，一个简单的 Observable 序列 1, 2, 3，first() 会返回 1。如果序列是 [1, 2, 3], [4, 5, 6]，first() 将返回 [1, 2, 3]。理解其核心在于“发射的值”是一个整体。

核心概念：何为“发射值”？

first 操作符的关键在于它作用于 Observable 实际发射的每一个值。一个常见的误解是，当 Observable 发射一个数组时，first 会自动“解包”这个数组并返回其内部的第一个元素。然而，这并非 first 的工作方式。

为了阐明这一点，我们来看两种不同的 Observable 值发射模式。

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

当一个 Observable 将整个数组作为一个单一事件发射时，first 操作符会把这个完整的数组视为其接收到的第一个“值”。

考虑以下代码示例：

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

// 示例 1: 使用 new Observable 手动发射数组
new Observable<number[]>(s => {
  s.next([1, 2, 3, 4]); // 整个数组 [1,2,3,4] 被作为一个单一值发射
  s.complete();
})
.pipe(first())
.subscribe({
  next: (response) => console.log('示例 1 结果:', response) // 输出: [1,2,3,4]
});

// 示例 2: 使用 of 操作符发射数组
of([5, 6, 7, 8]) // of 操作符将 [5,6,7,8] 作为一个单一值发射
.pipe(first())
.subscribe({
  next: (response) => console.log('示例 2 结果:', response) // 输出: [5,6,7,8]
});

在这两个示例中，Observable 并没有发射数字 1 或 5，而是将完整的数组 [1, 2, 3, 4] 或 [5, 6, 7, 8] 作为其唯一的、也是第一个值发射出去。因此，first() 操作符接收到并返回的，就是这个完整的数组。

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

16094 查看详情

场景二：发射数组的扁平化值

与上述情况不同，RxJS 提供了一些操作符，可以将一个可迭代对象（如数组）的每个元素作为独立的事件逐个发射。from 操作符就是其中之一。

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

// 示例 3: 使用 from 操作符发射数组元素
from([1, 2, 3, 4]) // from 操作符会遍历数组，将每个元素作为独立的事件逐个发射
.pipe(first())
.subscribe({
  next: (res) => console.log('示例 3 结果:', res) // 输出: 1
});

在这个示例中，from([1, 2, 3, 4]) 首先发射 1，然后发射 2，以此类推。first() 操作符在接收到第一个独立发射的值 1 后，立即将其返回并完成。这正是许多初学者期望 first 对数组进行操作时的行为。

如何处理发射数组并提取其内部元素？

如果你有一个 Observable 发射的是整个数组（如场景一），但你希望 first 操作符作用于数组内部的第一个元素，你需要先将这个数组“扁平化”，使其内部元素作为独立的事件发射出来。mergeAll 操作符可以实现这一目标。

mergeAll 的作用是将一个高阶 Observable（即发射 Observable 的 Observable）扁平化为一个低阶 Observable。当它作用于一个发射数组的 Observable 时，它会将数组视为一个“内部 Observable”（或者更准确地说，一个可迭代对象），并将其内部元素逐个发射出来。

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

// 示例 4: 结合 of 和 mergeAll 来扁平化数组
of([1, 2, 3, 4]) // of 发射整个数组 [1,2,3,4]
.pipe(
  mergeAll(),    // mergeAll 将数组 [1,2,3,4] 扁平化，使其内部元素 1, 2, 3, 4 逐个发射
  first()        // first 接收到扁平化后的第一个元素 1
)
.subscribe({
  next: (res) => console.log('示例 4 结果:', res) // 输出: 1
});

在这个示例中，of([1, 2, 3, 4]) 首先发射 [1, 2, 3, 4] 这个数组。接着，mergeAll() 操作符会订阅这个数组（或将其视为一个可迭代的内部源），并将其中的元素 1、2、3、4 作为独立的事件依次推送到下游。此时，first() 操作符接收到的第一个事件就是 1，并将其返回。

注意事项与总结

1. 理解 of() 与 from() 的核心区别：
   • of(...args)：将传入的每个参数作为一个独立的事件发射。如果参数本身是一个数组，那么这个数组会作为一个整体被发射。
   • from(iterable)：遍历传入的可迭代对象（如数组、字符串、Promise 等），将每个内部元素作为独立的事件发射。
2. first 操作符的作用对象：first 总是作用于 Observable 直接发射的第一个值。这个“值”可能是一个基本类型、一个对象，甚至是一个完整的数组。它不会自动“解包”任何复杂的数据结构。
3. 扁平化操作符：当你需要对 Observable 发射的数组内部元素进行操作时，考虑使用 mergeAll、concatAll、switchAll 或 mergeMap、concatMap、switchMap 等扁平化操作符。它们能将高阶 Observable 或发射可迭代对象的 Observable 转换为发射单个元素的 Observable。
4. 清晰的意图：在编写 RxJS 代码时，始终要明确你的 Observable 在每个管道阶段究竟发射的是什么类型的数据，这将帮助你正确选择和组合操作符。

通过深入理解 Observable 的发射模式以及 first 操作符的精确行为，我们可以更有效地利用 RxJS 处理复杂的数据流，避免因误解而产生的预期偏差。

以上就是深入理解 RxJS first 操作符：区分值发射模式的详细内容，更多请关注其它相关文章！

# switch  # 网红推广营销费用  # 江苏网站推广排名  # 丹江口seo快速排名  # 旺苍县网站建设  # 营销竞价推广  # 网站优化seo青岛东营  # 在这个  # 的是  # 作用于  # 数据结构  # 将其  # 迭代  # 是一个  # 扁平化  # 作为一个  # 第一个  # 可迭代对象  # 区别  # js  # 惠来网站建设全包  # 网站域名带横杠seo  # 温州建设网站企业  # SEO攻略旅游拍照 

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

相关推荐： 《领英》查看屏蔽名单方法  抖音网页版地址直接进入_抖音网页版在线观看入口  diskgenius分区工具如何设置Bios启动项  rabbitmq 持久化有什么缺点？  iSpring三分屏制作教程  PHP 4 函数中引用参数的默认值限制与解决方案  Lar*el Dusk 测试中管理浏览器权限：以剪贴板访问为例  德邦快递收费标准详解  sublime如何配置PHP开发环境_在sublime中运行与调试PHP代码  快递优选如何查优选物流_快递优选专属物流渠道查询与配送时效  b站如何管理订阅_b站订阅标签分类管理  广州地铁app准妈咪徽章领取方法  Golang如何实现HTTP请求重试机制_Golang HTTP请求错误处理策略  动漫岛汉化官网网 动漫岛官方动漫汉化地址  电脑的“恢复环境(WinRE)”找不到怎么办_Windows系统恢复环境重建【高级修复】  百度浏览器无法安装扩展程序_百度浏览器插件安装失败原因解析  c++如何链接Boost库_c++准标准库的集成与使用  菜鸟驿站的取件码忘了怎么办 手机快速查询指南  《律学法考》查看学习数据方法  mysql中如何配置字符集和排序规则_mysql字符集排序配置  苹果手机怎么合并照片_苹果手机合并多张照片的操作方法  怎么恢复删除的电脑文件_数据恢复软件使用教程  歌词怎么展示在|直播|间视频号？有什么注意事项？  解决异步Python机器人中同步操作的阻塞问题  芒果TV官网登录入口 芒果TV官方网站登录入口  J*aScript对象中深度嵌套URL键的查找与更新策略  京东快递物流信息不更新怎么办_物流停滞原因与处理方法  Win11如何分屏操作_Win11多窗口分屏技巧  《大周列国志》皇帝律令功能介绍  PHP魔术方法__set与__isset：设计考量、性能权衡与静态分析的视角  composer licenses 命令：如何检查项目依赖的许可证？  win11关机几秒又自己开机 Win11关机自动重启问题修复  海棠阅读登录教程_详细讲解海棠登录操作  抖音火山版注销账号抖音会注销吗 抖音火山版与抖音账号注销关系  VB表达式书写规则解析  《气泡星球》兑换码礼包大全  暴风影音官网正式版_暴风影音手机版官网下载安卓  search中maxlength属性用法解析  如何使用CSS Grid实现“大方块左侧，小方块右侧垂直堆叠”的水平布局  123网页端官方登录页 123邮箱网页版即时通讯服务  晓晓优选app支付宝绑定方法  Win10如何彻底关闭OneDrive Win10禁用云同步功能【纯净】  申通快递查询 申通物流快递单实时查询入口  Scipy Sparse CSR 矩阵非零元素行级遍历的最佳实践  中大网校app做题记录清除方法  12306售票时间最新规定 | 网上订票和车站窗口时间一样吗  J*aScript调试技巧_性能分析与内存快照  PointNet++语义分割模型中类别变更引发的断言错误及标签处理策略  如何查询个人病历记录  《i莞家》修改昵称方法 

 2025-10-23