在 RxJS 中，concatMap 和 map 是两个常用的操作符。虽然这两个操作符都是用于处理 Observables 序列中的数值，但是它们有许多不同之处。本文将详细讨论 concatMap 和 map 的异同以及实战应用，以帮助读者更好地理解和使用 RxJS。
concatMap 和 map 的异同
map
map 操作符用于将一个 Observable 序列中的值转换为另一个类型的值，但不会改变 Observable 序列的结构。例如，用 map 操作符将一个从输入框中获取到的字符串类型的值转换为一个数字类型的值：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - --- - ---- -----------------
----- ----- - --------------------------------
---------------- --------
------
--------- -- --------------------
--------- -- ----------------
-
---------------- -- --------------------上面的代码将监听输入框变化的事件，每次输入框中的值发生变化时都会将输入框的值通过 map 操作符转换为数字类型的值，最后输出转换后的值。
concatMap
concatMap 操作符也用于将一个 Observable 序列中的值转换为另一个类型的值，但是它能够改变 Observable 序列的结构。concatMap 操作符会对 Observable 序列中的每个值都应用一个转换函数，并返回一个新的 Observable 序列。当新序列中的 Observable 产生值时，原始序列中的下一个 Observable 才被订阅。
例如，通过 concatMap 操作符将一个 Observable 序列中的数值传递给一个 HTTP 请求：
-- -------------------- ---- -------
------ - -- - ---- -------
------ - --------- - ---- -----------------
----- ------- - ----- -- ---
-------
------
---------------- -- -
----- --- - ---------------------------------
------ -----------
--
-
------------------- -- -----------------------上面的代码将 numbers 这个 Observable 序列中的每个数值传递给一个 HTTP 请求并返回一个新的 Observable 序列，新序列中的 Observable 将 HTTP 请求的结果作为数值。由于 concatMap 操作符的作用，当新序列中的 Observable 产生值时，原始序列中的下一个 Observable 才被订阅，因此可以确保请求按顺序执行。
concatMap 和 map 的实战应用
实现类型后退和搜索
假设我们正在编写一个数据表格，用户可以按照每列的标题进行排序，还可以根据表格中的记录进行搜索。在这些操作中，concatMap 和 map 都有实际的应用。
首先，我们需要为每个标题列都添加一个排序按钮。当用户点击排序按钮时，表格应该按照点击的排序按钮所在的列进行排序。
我们可以使用 fromEvent 方法来监听排序按钮的点击事件：
const sortButtons = document.querySelectorAll('.sort-button');
fromEvent(sortButtons, 'click').subscribe(event => {
// ...
});接下来，我们需要根据用户的排序行为来对表格中的数据进行排序。我们可以使用 concatMap 操作符将用户的点击事件转换为一个对数据表格进行搜索和排序的 Observable 序列。假设我们已经有了获取数据的方法 fetchData()，我们可以按照如下方式进行搜索和排序：
-- -------------------- ---- -------
---------------------- --------
------
--------------- -- -
----- ------ - -----------------------------------------
----- ---------- - ---------------------------------------
----- --------- - -------------------------------- - ------ - ------
----- ------- - ----------------------------------------------
------ --------------------- ---------- --------------
-------- -- -
-- -------------------
--
-
--
-
-------------上面的代码中，我们先从点击事件中获取用户点击的按钮所在的列、排序方向以及搜索关键字。然后使用 fetchData 方法获取数据，并通过 map 操作符处理返回的数据。最终，我们可以将处理后的数据渲染到表格中。
总结
本文介绍了 RxJS 中的 concatMap 和 map 操作符的异同及实战应用。通过本文的讲解，读者可以更好地理解 RxJS 操作符的使用方法，以及如何将 RxJS 应用于实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518dc1695b1f8cacd11e8e6