RxJS 是一种基于事件流的编程范例，可以通过操作符对事件流进行观察和处理。操作符是 RxJS 的重要组成部分，它们能够过滤、映射、组合、变换和聚合事件流。在本文中，我们将对 RxJS 中的操作符进行分类，并介绍它们的使用场景和示例代码。
创建类操作符
创建类操作符是 RxJS 中最常被用到的一类操作符，它们用于创建一个事件流并发送数据。常见的创建类操作符有 of、from 和 interval。
of 操作符
of 操作符用于创建一个事件流并依次发送指定的值。
使用场景：当需要依次发送多个数据时，可以使用 of 操作符。
示例代码：
import { of } from 'rxjs';
of(1, 2, 3).subscribe(value => console.log(value)); // 1 2 3from 操作符
from 操作符用于创建一个事件流并发送一个数组、Promise、迭代器、类数组对象等类数组的数据源。
使用场景：当需要从一个数组、Promise、迭代器、类数组对象等类数组的数据源中创建事件流时，可以使用 from 操作符。
示例代码：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ----- ----- - --- -- --- ----- ------- - ---------------------- -------- ----- -------- - --------------- ----- --- - --- ------- -- ---- --------------------------- -- -------------------- -- - - - ----------------------------- -- -------------------- -- ----- ----- ------------------------------ -- -------------------- -- - - - ------------------------- -- -------------------- -- - - -
interval 操作符
interval 操作符用于创建一个事件流，该事件流间隔指定时间发送自增的数字。
使用场景：当需要定时发送事件流时，可以使用 interval 操作符。
示例代码：
import { interval } from 'rxjs';
interval(1000).subscribe(value => console.log(value)); // 0 1 2 3 ...转换类操作符
转换类操作符是 RxJS 中最常用的一类操作符，它们用于对事件流进行转换、筛选、映射和分组。常见的转换类操作符有 map、filter 和 groupBy。
map 操作符
map 操作符用于将事件流中的每个数据都进行一次映射。
使用场景：当需要对事件流中的每个数据进行处理时，可以使用 map 操作符。
示例代码：
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
from([1, 2, 3]).pipe(
map(value => value * 2)
).subscribe(value => console.log(value)); // 2 4 6filter 操作符
filter 操作符用于从事件流中筛选出符合条件的数据。
使用场景：当需要从事件流中筛选出符合条件的数据时，可以使用 filter 操作符。
示例代码：
import { from } from 'rxjs';
import { filter } from 'rxjs/operators';
from([1, 2, 3, 4, 5]).pipe(
filter(value => value % 2 === 0)
).subscribe(value => console.log(value)); // 2 4groupBy 操作符
groupBy 操作符用于将事件流中的数据根据指定规则进行分组。
使用场景：当需要将事件流中的数据根据指定规则进行分组时，可以使用 groupBy 操作符。
示例代码：
-- -------------------- ---- ------- ------ - ---- - ---- ------- ------ - -------- --------- ------- - ---- ----------------- ------ - --- -- ----- ------ -- - --- -- ----- ------ -- - --- -- ----- ------ -- - --- -- ----- ----- -- - --- -- ----- ------ - -------- -------------- -- ------------- -------------- -- ---------------------- ------------------- -- ---------------------- -- -- --- -- ----- ------ -- - --- -- ----- ------ -- -- -- --- -- ----- ------ -- - --- -- ----- ------ -- -- -- --- -- ----- ----- --
组合类操作符
组合类操作符是 RxJS 中比较常用的一类操作符，它们用于将多个事件流合并为一个事件流。常见的组合类操作符有 merge、concat 和 zip。
merge 操作符
merge 操作符用于将多个事件流合并为一个事件流。
使用场景：当需要合并多个事件流时，可以使用 merge 操作符。
示例代码：
-- -------------------- ---- ------- ------ - --------- ----- - ---- ------- ------ - ----- - ---- ----------------- ----- -------- - ------------------------------------ ----- -------- - ------------------------------------- ----- -------- - ------------------------------------- ----- ------- - --------------- --------- ---------- ----------------------- -- -------------------- -- ----- ------ ------ ----- ---
concat 操作符
concat 操作符用于将多个事件流按先后顺序依次合并为一个事件流。
使用场景：当需要将多个事件流按先后顺序依次合并时，可以使用 concat 操作符。
示例代码：
-- -------------------- ---- ------- ------ - ----- ------ - ---- ------- ----- -------- - -------- -- ---- ----- -------- - -------- -- ---- ----- -------- - -------- -- ---- ----- ------------- - ---------------- --------- ---------- ----------------------------- -- -------------------- -- - - - - - - - - -
zip 操作符
zip 操作符用于将多个事件流按顺序一一合并为一个事件流。
使用场景：当需要将多个事件流按顺序一一合并时，可以使用 zip 操作符。
示例代码：
-- -------------------- ---- ------- ------ - --------- --- - ---- ------- ----- -------- - --------------- ----- -------- - --------------- ----- -------- - --------------- ----- ------- - ------------- --------- ---------- ------------------------ -- --------------------- -- --- -- -- --- -- -- --- -- -- ---
错误处理类操作符
错误处理类操作符用于处理事件流中的错误，常用的错误处理类操作符有 catchError 和 retry。
catchError 操作符
catchError 操作符用于捕获事件流中的错误，并返回可观察对象，以便继续订阅。
使用场景：当需要捕获事件流中的错误，并返回可观察对象，以便继续订阅时，可以使用 catchError 操作符。
示例代码：
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---- ---------- - ---- -----------------
----- -- --------
--------- -- -
-- ------ --- -- -
----- --- ------------ -- ----
-
------ ------
---
---------------- -- --------- --------- - - ---------------
----------------- -- -------------------- -- - ------ --------- ----- -- -- -retry 操作符
retry 操作符用于在事件流执行失败时进行重试。
使用场景：当需要重试一个执行失败的事件流时，可以使用 retry 操作符。
示例代码：
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ---- ----- - ---- -----------------
----- ------- - -------- -- -- ------- ---------
--------- -- -
-- ------ --- ------- -
----- --- ------------ -- --- - ---------
-
------ ------
---
--------
--
----------------------- -- -------------------- -- - - - - - - - - - ------- ----- -- --- - -------总结
本文介绍了 RxJS 中的操作符，并对其进行了分类和介绍。创建类操作符可用于创建事件流并发送数据；转换类操作符可用于对事件流进行转换、筛选、映射和分组；组合类操作符可将多个事件流合并为一个事件流；错误处理类操作符可用于处理事件流中的错误。希望本文能够对大家理解 RxJS 中的操作符有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d659e95b1f8cacd4f93e9