RxJS操作符备忘录：按场景分类的速查指南

RxJS操作符备忘录：按场景分类的速查指南

【免费下载链接】RxJS The Reactive Extensions for JavaScript 项目地址: https://gitcode.com/gh_mirrors/rxj/RxJS

你是否还在面对RxJS数十种操作符感到无从下手？是否在处理用户输入抖动、合并数据流时反复查阅文档？本文将RxJS操作符按日常开发场景分类整理，包含创建流、转换数据、过滤条件、组合序列等核心场景，每个操作符均配有简洁示例和官方文档链接，助你快速定位所需工具。读完本文，你将能够：掌握80%场景所需的20%核心操作符、理解操作符适用场景与区别、通过示例代码快速集成到项目中。

一、创建数据流：从无到有构建序列

创建类操作符用于生成初始数据流，是响应式编程的起点。常用场景包括定时任务、事件监听、转换现有数据结构等。

官方创建操作符文档

操作符	作用	示例
of	发射指定的一组值	Rx.Observable.of(1,2,3).subscribe(console.log)
from	转换数组/类数组/迭代器为流	Rx.Observable.from([1,2,3]).subscribe(console.log)
interval	按固定时间间隔发射自增整数	Rx.Observable.interval(1000).take(3) // 每秒发射0,1,2
fromEvent	将DOM事件转换为流	Rx.Observable.fromEvent(document, 'click')
timer	延迟发射值，支持周期性发射	Rx.Observable.timer(1000, 2000) // 1秒后发射0，之后每2秒发射

二、数据转换：重塑流中数据形态

转换类操作符用于修改流中的数据格式或结构，是处理API响应、表单数据的核心工具。

官方查询操作符文档

操作符	作用	示例
map	对每个值应用转换函数	source.map(x => x * 2) // 将每个值翻倍
pluck	提取对象指定属性	userStream.pluck('name') // 提取用户对象的name属性
flatMap	映射后展平嵌套流	userIdStream.flatMap(id => fetchUser(id)) // 将ID映射为用户数据请求
switchMap	切换到最新的内部流（取消旧流）	searchInput.flatMap(keyword => searchAPI(keyword)) // 忽略旧搜索结果

三、数据过滤：精准筛选所需值

过滤类操作符用于从流中筛选符合条件的数据，常用于用户输入验证、数据清洗等场景。

操作符	作用	示例
filter	保留满足条件的值	numbers.filter(x => x % 2 === 0) // 只保留偶数
debounceTime	忽略高频发射值（防抖）	inputEvents.debounceTime(300) // 输入停止300ms后才发射
throttleTime	限制发射频率（节流）	scrollEvents.throttleTime(100) // 每100ms最多发射一次
take	只取前N个值	dataStream.take(5) // 只取前5条数据
skip	跳过前N个值	logs.skip(10) // 跳过前10条日志
distinctUntilChanged	只发射与前值不同的值	temperature.distinctUntilChanged() // 温度变化时才发射

四、组合数据流：多源数据协同处理

组合类操作符用于合并多个数据流，解决如表单多字段验证、多API数据聚合等场景。

官方组合操作符文档

操作符	作用	示例
merge	合并多个流为一个（并行）	Rx.Observable.merge(stream1, stream2) // 同时处理两个流
concat	串联多个流（顺序执行）	stream1.concat(stream2) // 先发射stream1全部值，再发射stream2
combineLatest	组合最新值（只要有流更新就发射）	Rx.Observable.combineLatest(name$, age$, (n,a) => ({n,a}))
zip	按位置配对多个流的值	Rx.Observable.zip(a$, b$, (a,b) => a + b) // 第1对相加，第2对相加...
forkJoin	等待所有流完成后发射最后值	Rx.Observable.forkJoin(api1$, api2$) // 所有API请求完成后处理结果

五、错误处理：优雅应对异常情况

错误处理类操作符确保应用在数据流异常时仍能稳定运行，避免程序崩溃。

官方错误处理文档

操作符	作用	示例
catch	捕获错误并切换到备用流	dataStream.catch(error => Rx.Observable.of(defaultData))
retry	发生错误时重试N次	apiCall.retry(3) // 最多重试3次
retryWhen	自定义重试策略（如延迟重试）	apiCall.retryWhen(errors => errors.delay(1000)) // 错误后延迟1秒重试
onErrorResumeNext	忽略错误继续下一个流	stream1.onErrorResumeNext(stream2) // stream1出错时切换到stream2

六、实战示例：用户搜索功能实现

以下示例展示如何组合多个操作符实现带防抖、取消旧请求、错误处理的搜索功能：

// 从输入框获取用户输入事件流
const searchInput = Rx.Observable.fromEvent(input, 'input')
  .pluck('target', 'value') // 提取输入值
  .debounceTime(300) // 防抖：等待用户输入停止300ms
  .distinctUntilChanged() // 输入不变时不发射
  .filter(query => query.length > 2) // 过滤短查询
  .switchMap(query => 
    // 切换到最新请求，取消旧请求
    Rx.Observable.ajax.getJSON(`/api/search?q=${query}`)
      .catch(error => Rx.Observable.of({ results: [] })) // 错误时返回空结果
  );

// 订阅结果并更新UI
searchInput.subscribe(results => {
  renderResults(results);
});

七、扩展资源

• RxJS官方操作符文档
• 错误处理最佳实践
• 组合操作符高级用法
• 完整示例代码

【免费下载链接】RxJS The Reactive Extensions for JavaScript 项目地址: https://gitcode.com/gh_mirrors/rxj/RxJS