在 RxJS 中，map 和 switchMap 是常见的操作符，用于处理流中的数据。但它们的作用却有所不同，本文就来详细讲解一下它们的区别。
map 操作符
map 操作符用于将流中的每一个值进行一定的处理，返回一个新的值。它的语法如下：
------------ --------- --------- ----- ----------
其中，project 表示接收每个源数据的回调函数，thisArg 是可选的，表示 project 函数中 this 的指向。
举个例子，假设我们有这样一个流：
----- ------- - ----- -- -- -- ---
我们想对每个值进行平方处理，可以使用 map 操作符：
----- -------- - ------------- --------- -- ----- - ------ --
最后得到的流 squared$ 的值为：1, 4, 9, 16, 25。
通过上面的例子可以看出，使用 map 操作符可以将一个流中的数据，转换成另一个流中的数据。
switchMap 操作符
switchMap 操作符用于将流中的每个数据，转换成一个新的流，然后将这些新的流合并成一个大流。通俗点讲，就是将流中的每个数据映射成一个新的流，然后将这些新的流合并成一个大流。它的语法如下：
------------------ --------- ---------------- ---------- ----------
其中，project 表示接收每个源数据的回调函数，它返回一个新的 Observable；resultSelector 是可选的，表示对转化后的值进行进一步的处理。
下面我们以一个例子来帮助大家理解 switchMap 操作符的用法。
假设我们有这样一个流：
----- ------- - ---------- ------- --------
我们定义一个函数，它会将每个字符串转换成一个异步操作的流：
-------- ---------------- -------- ---------- -
------ ------------------- - -----------
-------------
------ -- ------------------ -----------
--
-然后将这个函数应用到源流中的每个数据：
----- --------------------- - ------------- --------------- -- ----------------- --
最后，我们订阅 fetchDataBySwitchMap$：
------------------------------------- -- --------------------
得到的结果如下：
----- ---- ---- ----- ---- ---- ----- ---- ----
通过上面的例子，我们可以看到，switchMap 操作符将源流中的每个数据转换成了一个新的异步操作流，并将这些流合并成一个大流。这个大流将输出每个异步操作流中的数据。
map 和 switchMap 的区别
从上面的介绍可以看出，map 和 switchMap 操作符都可以将一个流中的数据进行转换，生成一个新的流。但两者的区别在于：
- map 操作符将每个数据都映射成对应的值，最终生成一个相同数量的新流；
- switchMap 操作符将每个数据映射成一个新的操作流，再将这些操作流合并成一个大流，最终生成一个包含所有操作流中数据的大流。
一般来说，如果我们只需要对每个数据进行简单的处理，可以使用 map 操作符，它简单易懂，容易维护。而如果我们需要根据每个数据生成一个异步操作的流，并将这些流合并成一个大流，则可以使用 switchMap 操作符。
总结
今天我们讲解了 RxJS 中的 map 和 switchMap 操作符。两种操作符都非常常用，但它们的作用有所区别，需要我们根据实际情况选择合适的操作符。这篇文章希望能够给你带来一些启示，帮助你更好地应用 RxJS。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66553379d3423812e49b2d6b