RxJS 是一种流式编程库，其提供了一组操作符以实现复杂的异步数据流处理。其中一个核心操作符是 groupBy，该操作符将数据源分组并返回一个分组后的 Observable。本文将对 RxJS 的 groupBy 操作符进行详细介绍，并提供学习和指导意义。
什么是 groupBy 操作符？
groupBy 操作符用于将一个 Observable 的数据源按照某个条件进行分组，每个分组都会产生一个新的 Observable。这些新的 Observables 会将属于同一组的值发出来。
groupBy 操作符的语法为：
groupBy(keySelector: ((value: T) => K), elementSelector?: ((value: T) => R),
durationSelector?: ((grouped: GroupedObservable<K, R>) => Observable<any>),
subjectSelector?: () => Subject<R>): Observable<GroupedObservable<K, R>>其中，keySelector 表示用于分组的条件；elementSelector 表示对分组后的每个 Observable 进行操作的函数；durationSelector 表示限制每个分组 Observable 的生命周期的函数；subjectSelector 表示创建 emit 推送完后 publish 的 Subject 实例的类型。
groupBy 操作符示例
下面我们通过几个示例来详细介绍 groupBy 操作符。
示例一：将数字按奇偶分组
-- -------------------- ---- -------
------ - -- - ---- -------
------ - -------- --------- ------- - ---- -----------------
----- ------- - ----- -- -- -- -- -- -- -- -- ----
-------------
----------- ---- -- - - - --- --- -- ------
----------------- -- ----------------------- -- -------
-------------------------
-- --
-- --- -- -- -- --
-- --- -- -- -- ---上述代码中，我们首先创建了一个 Observable source$，其中包含数字 1 到 10。然后我们调用了 groupBy 操作符并传入条件，将source$ 分成了两个组，其中奇数一组，偶数一组。接着我们使用 mergeMap 操作符将每个分组 Observable 转换为一个数组，并通过 subscribe 进行输出的操作。输出结果为两个组，其中一个包含奇数，另一个包含偶数。
示例二：映射分组
-- -------------------- ---- -------
------ - -- - ---- -------
------ - -------- --------- ------- - ---- -----------------
----- ------- - ----------- --------- --------- ------- --------------
----- ------- - ------- ---- ---- ---- -----
-------------
----------- ---- -- --------------------------- -- ---------
----------------- -- ------------------------ -- ---------
----------------- -- ----------------------- ------------ -- ----------------- - ----- ------- ------ -----
-- ----------------------
-------------------------
-- --
-- ------ ---------- ------- ------
-- ------ ----------- ------- ------
-- ------ ----------- ------- ------
-- ------ --------- ------- ------
-- ------ --------------- ------- ------上述代码中，我们首先创建了两个 Observable，source$ 包含单词，target$ 包含一个字母或其他类型的目标。然后我们使用 groupBy 操作符根据单词首字母进行分组，并使用 mergeMap 操作符将每个分组转换为数组。接着我们使用 mergeMap 操作符将 target$ 转换为数组，并使用 map 操作符创建一个包含 word 和 target 属性的单个数组项。最后通过 subscribe 进行输出。输出结果为每个单词与与之对应的目标配对。
示例三：实现动态分组
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - -------- --------- ----- --- - ---- -----------------
----- ----- - ------------------------------
--- ------------ - -----
-----------
------- -- ------------ - - - --- -- --- ------ - --------- --
----------- -- -------------- -- -----
----------------- -- ----------------------- -- ------
-------------------------上述代码中，我们首先创建了一个每秒发出一个数据项的 Observable data$，包含前20个正整数。然后我们使用 groupBy 操作符区分每个数据的分组，并且通过 tap 操作符在源 Observable 发出之前获得了每个数据的组 ID。最后，我们使用 mergeMap 操作符将每个分组 Observable 转换为一个数组，并通过 subscribe 进行输出。输出结果是三个数组，按组 ID 区分。
总结
groupBy 操作符是 RxJS 的一个核心操作符，可以将一个 Observable 的数据源按照某个条件进行分组，每个分组都会产生一个新的 Observable。本文对 groupBy 操作符进行了详细讲解，并提供了几个有用的示例来加强你的理解。希望这些示例能够帮助你更好地理解 groupBy 操作符的实现方式和使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64545557968c7c53b0847cd6