RxJS 操作符

2025年3月17日 | 阅读 10 分钟

操作符是 RxJS 的重要组成部分。RxJS 提供了大量操作符。RxJS 中有超过 100 多个操作符可供您与 observables 一起使用。操作符是一个纯函数，它以 observable 作为输入，并以 observable 的形式提供输出。

简单来说，我们可以说操作符就是可以与 RxJS 的 Observables 或 Subjects 一起使用的方法。RxJS 操作符使我们能够以某种方式修改原始 observable 并返回一个新的 observable。操作符不会修改现有的 observable。它们只是对其进行修改并返回一个新的。操作符被称为不修改其作用域之外的变量的函数类型。RxJS 操作符主要有两种类型：

静态操作符： 静态操作符通常用于创建 observables。这些类型的操作符主要可以在创建操作符中找到。

实例操作符： 实例操作符是 observable 实例上的方法。这些用于占 RxJS 我们使用过的大多数操作符。

如何使用操作符？

正如我们所知，操作符是纯函数，它们以 observable 作为输入，并且提供的输出也是 observable。

我们需要一个 pipe() 方法来使用操作符。让我们来看一个 pipe() 函数的例子。

使用 pipe() 方法的语法

let obs = of(1,2,3); // an observable
obs.pipe(
   operator1(),
   operator2(),
   operator3(),
) 

在上面的语法中，我们使用 of() 方法创建了一个 observable。此方法接受值 1、2 和 3。在此 observable 上，您可以使用 pipe() 方法使用不同类型的操作符执行许多操作，如上所示。

让我们看一个操作符的工作示例，以清晰地理解这个概念。在此示例中，我们将使用 filter 操作符来过滤偶数，然后我们将使用 reduce() 操作符来累加所有偶数并给出结果。

示例 1

import { of } from 'rxjs';
import { map, reduce, filter } from 'rxjs/operators';
let test1 = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
let case1 = test1.pipe(
   filter(x => x % 2 === 0),
   reduce((acc, one) => acc + one, 0)
)
case1.subscribe(x => console.log(x)); 

在通过使用 node -r esm testrx.js 命令执行程序后，我们将看到以下结果。

输出

您可以看到 110 是上述数字所有偶数的总和。

示例 2

让我们来看另一个 interval 操作符的例子。此操作符将在给定时间间隔内为每次创建 Observable。在以下示例中，程序将在每 1000 毫秒返回一个 observable。

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
let test = interval(1000);
let case1 = test.pipe(take(10));
case1.subscribe(x => console.log(x));

输出

RxJS 操作符的分类

根据 RxJS 操作符的官方文档分类，您可以找到以下类别的操作符：

创建
数学运算
合并或组合
转换
过滤
用途
条件
多播
错误处理
Boolean
聚合

创建操作符

以下是可用作创建操作符的操作符列表：

索引	运算符	描述
1.	ajax	ajax 操作符用于为给定 URL 发起 ajax 请求。
2.	from（从）	from 操作符用于从数组、类数组对象、Promise、可迭代对象或类 Observable 对象创建 observable。
3.	fromEvent	fromEvent 操作符用于在元素上使用 observable 作为输出，这些元素会发出事件，例如按钮点击等。
4.	fromEventPattern	fromEventPattern 操作符用于从用于注册事件处理程序的输入函数创建 observable。
5.	interval	interval 操作符用于在给定时间间隔内为每次创建 Observable。
6.	的	of 操作符用于获取传递的参数并将其转换为 observable。
7.	range	range 操作符用于创建 Observable，该 Observable 根据提供的范围为您提供一系列数字。
8.	throwError	throwError 操作符用于创建通知错误的 observable。
9.	timer	timer 操作符用于创建 observable，该 observable 在超时后发出值，并且每次调用后值都会不断增加。
10.	iif	iif 操作符用于决定将订阅哪个 Observable。

数学操作符

以下是可用作数学操作符的操作符列表：

索引	运算符	描述
1.	count	count 操作符用于获取一个带有值的 observable，并将其转换为一个产生单个值的 observable。
2.	max	max 方法用于获取一个包含所有值的 observable，并返回一个包含列表中最大值的 observable。
3.	min	min 方法用于获取一个包含所有值的 observable，并返回一个包含列表中最小值的 observable。
4.	reduce	在 reduce 操作符中，累加器函数应用于输入 observable。它以 observable 的形式返回累加值，并带有传递给累加器函数的可选种子值。因此，reduce 函数接受两个参数：一个累加器函数，第二个是种子值。

连接运算符

以下是可用作合并操作符的操作符列表：

索引	运算符	描述
1.	concat	concat 操作符用于按顺序发出作为输入的 Observable，然后继续下一个。
2.	forkJoin	forkJoin 操作符用于接受数组或字典对象作为输入，等待 observable 完成，并返回来自给定 observable 的最后发出值。
3.	merge	merge 操作符用于接受输入 observable 并发出 observable 中的所有值，然后发出一个单一的输出 observable。
4.	race	race 操作符用于返回一个 observable，该 observable 将是第一个源 observable 的镜像副本。

转换操作符

以下是可用作转换操作符的操作符列表：

索引	运算符	描述
1.	buffer	buffer 操作符用于在 observable 上操作，并接受 observable 作为参数。它开始将源 observable 数组中发出的值进行缓冲，并在作为参数传递的 observable 发出时发出。一旦作为参数的 observable 发出，缓冲区就会重置，并在输入 observable 发出之前继续在原始 observable 上缓冲，然后重复相同的过程。
2.	bufferCount	buffercount 操作符用于收集在其上调用的 observable 的值，并在给定给 buffercount 的缓冲区大小匹配时发出这些值。
3.	bufferTime	bufferTime 操作符与 bufferCount 类似。它用于收集在其上调用的 observable 的值，并以 bufferTimeSpan 发出。它接受 1 个参数，即 bufferTimeSpan。
4.	bufferToggle	bufferToggle 操作符接受两个参数：openings 和 closingSelector。opening 参数是用于开始缓冲区的可订阅对象或 Promise。第二个参数 closingSelector 再次是可订阅对象或 Promise，用于关闭缓冲区并发出收集的值。
5.	bufferWhen	bufferWhen 操作符用于以数组形式提供值，它接受一个函数作为参数，该函数将决定何时关闭、发出和重置缓冲区。
6.	expand	expand 操作符用于接受一个函数作为参数，该函数递归地应用于源 observable 和输出 observable。最终值是 observable。
7.	groupBy	groupBy 操作符用于根据特定条件对输出进行分组，这些分组项作为 GroupedObservable 发出。
8.	map	在 map 操作符的情况下，一个 project 函数应用于源 Observable 的每个值，并作为 Observable 发出相同的输出。
9.	mapTo	在 mapTo 操作符中，当源 Observable 发出值时，将始终将一个常量值作为输出与 Observable 一起提供。
10.	mergeMap	在 mergeMap 操作符中，一个 project 函数应用于每个源值，其输出与输出 Observable 合并。
11.	switchMap	switchMap 操作符用于对每个源值应用一个 project 函数。其输出与输出 Observable 合并，并且给出的值是最新的 projected Observable。
12.	window	window 操作符用于接受 windowboundaries 作为参数（这是一个 observable），并在给定的 windowboundaries 发出时返回一个嵌套的 observable。

过滤操作符

以下是可用作过滤操作符的操作符列表：

索引	运算符	描述
1.	debounce	在 debounce 操作符中，值在一段时间后从源 Observable 发出，并且发出是由另一个作为 Observable 或 Promise 提供的输入决定的。
2.	debounceTime	debounceTime 操作符用于在时间完成后才从源 observable 发出值。
3.	distinct	此操作符用于从源 observable 发出所有与先前值不同的值。
4.	elementAt	此操作符用于根据给定的索引从源 observable 中提取单个值。
5.	filter	此操作符用于根据给定的谓词函数过滤源 Observable 中的值。
6.	first	first 操作符用于提供源 Observable 发出的第一个值。
7.	last	last 操作符用于提供源 Observable 发出的最后一个值。
8.	ignoreElements	ignoreElements 操作符用于忽略源 Observable 中的所有值，而只执行 complete 或 error 回调函数的调用。
9.	sample	sample 操作符用于提供源 Observable 的最新值，输出将取决于传递给它的参数是否发出。
10.	skip	skip 操作符用于返回一个 observable，该 observable 将跳过作为输入的前 count 个项。
11.	throttle	throttle 操作符用于发出输出并忽略源 observable 中的值，忽略时间由作为参数的输入函数确定，然后重复相同的过程。

实用操作符

以下是可用作实用操作符的操作符列表：

索引	运算符	描述
1.	tap	tap 操作符的输出与源 observable 相同，可用于将值从 observable 记录给用户。
2.	delay	delay 操作符用于根据给定的超时延迟源 observable 发出的值。
3.	delayWhen	delayWhen 操作符用于根据来自另一个作为输入的可订阅对象的超时延迟源 observable 发出的值。
4.	observeOn	observeOn 操作符基于输入调度器。它用于重新发出源 observable 的通知。
5.	subscribeOn	subscribeOn 操作符有助于基于输入调度器异步订阅源 observable。
6.	timeInterval	timeInterval 操作符用于返回一个对象，该对象包含当前值以及使用调度器输入计算的当前值和前一个值之间经过的时间。
7.	时间戳	timestamp 操作符用于返回与源 observable 发出的值一起的时间戳。它告诉我们值何时被发出。
8.	timeout	timeout 操作符用于在源 observable 在给定超时时间内未发出值时抛出错误。
9.	toArray	toArray 操作符用于累积 observable 的所有源值，并在源完成时以数组形式提供其输出。

条件运算符

以下是可用作条件操作符的操作符列表：

索引	运算符	描述
1.	defaultIfEmpty	defaultIfEmpty 操作符用于在源 observable 为空时返回默认值。
2.	every	every 操作符用于根据输入函数返回一个 observable，该函数满足源 observable 上每个值上的条件。
3.	find	find 操作符用于在源 observable 的第一个值满足作为输入的谓词函数的条件时返回 observable。
4.	findIndex	findIndex 操作符基于输入调度。它用于重新发出源 observable 的通知。
5.	isEmpty	isEmpty 操作符在输入 observable 在不发出任何值的情况下进入 complete 回调时输出“True”，而在输入 observable 发出任何值时输出“False”。

多播操作符

以下是可用作多播操作符的操作符列表：

索引	运算符	描述
1.	multicast	multicast 操作符与其它订阅者共享创建的单个订阅。multicast 接受的参数是 subject 或一个返回具有 connect 方法的 ConnectableObservable 的工厂方法。调用 connect 方法进行订阅。
2.	publish	publish 操作符用于返回 ConnectableObservable 并使用 connect 方法订阅 observables。
3.	publishBehavior	publishBehaviour 使用 BehaviourSubject，并返回 ConnectableObservable。connect 方法用于订阅创建的 observable。
4.	publishLast	publishBehaviour 操作符使用 AsyncSubject，并返回 ConnectableObservable。connect 方法用于订阅创建的 observable。
5.	publishReplay	publishReplay 操作符使用 behavior subject，它可以缓冲值，将它们重放到新订阅者，并返回 ConnectableObservable。connect 方法用于订阅创建的 observable。
6.	share	share 操作符是 multicast 操作符的别名。唯一的区别是您不必手动调用 connect 方法来启动订阅。

错误处理操作符

以下是可用作错误处理操作符的操作符列表：

索引	运算符	描述
1.	catchError	catchError 操作符通过返回新的 observable 或错误来处理源 observable 上的错误。
2.	retry	retry 操作符用于在源 observable 发生错误时进行重试。重试次数根据给定的输入计数进行。
3.	retryWhen		-

下一个主题RxJS Observables

← 上一个下一个 →

RxJS 操作符

如何使用操作符？

RxJS 操作符的分类

创建操作符

数学操作符

连接运算符

转换操作符

过滤操作符

实用操作符

条件运算符

多播操作符

错误处理操作符

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

RxJS 教程

RxJS 操作符

如何使用操作符？

RxJS 操作符的分类

创建操作符

数学操作符

连接运算符

转换操作符

过滤操作符

实用操作符

条件运算符

多播操作符

错误处理操作符

相关帖子

RxJS 教程

为什么使用 RxJS

RxJS 可观察对象

RxJS 主题

RxJS 订阅

RxJS 第一个示例

RxJS 调度器

RxJS 安装

RxJS 最新更新

优点 & 缺点

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器