RxJS 是一个强大的 JavaScript 函数库，它为响应式编程提供了支持。在前端开发中，随着 web 应用程序变得越来越复杂，RxJS 能够帮助我们更好地管理异步操作。在 RxJS 中，map 和 switchMap 操作符是必须掌握的，它们允许我们对数据流进行映射和扁平化等高效操作。
map 操作符
RxJS 中的 map 操作符是一个非常常用的操作符，它用于对流中的每个元素进行转换和映射。简单来说，map 操作符可以将一个流中的元素通过函数映射成另一个流中的新元素，这里的函数可以是同步函数也可以是异步函数。
下面是一个简单的例子，我们定义了一个数据流，其中包含 5 个整数，我们通过 map 操作符将每个元素都加上了 10：
import { range } from 'rxjs';
import { map } from 'rxjs/operators';
const source = range(1, 5);
const example = source.pipe(
map(num => num + 10)
);
example.subscribe(val => console.log(`Result: ${val}`));输出结果如下：
Result: 11 Result: 12 Result: 13 Result: 14 Result: 15
在实际应用中，我们经常需要对数据流进行转换，比如将处理后台数据响应，并将其以自己的方式格式化。这时 map 操作符就尤其重要，它可以让我们轻松达到这个目的。
switchMap 操作符
switchMap 操作符的作用与 map 操作符类似，都是用于对数据流进行转换，但 switchMap 操作符的定义与 map 操作符有所不同。switchMap 操作符将源数据流的每个元素映射到一个 Observable 上，然后将结果 Observable 合并到结果 Observable 流中，这个结果 Observable 流可以同时处理多个数据流。
换句话说，switchMap 操作符将一个高阶 Observable 流转化成一个一阶 Observable 流。这样可以方便地处理实时数据流，如用户输入的搜索词，用户输入的搜索词会实时变化，如果用 map 操作符只能监听一次搜索词，而用 switchMap 操作符可以实时监听搜索词的变化。
下面是一个简单的例子，我们定义了一个数据流，其中包含两个字符串，我们通过 switchMap 操作符将它们转换为对应的 HTTP 请求，最后获取 JSON 数据：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ---------- ---- --- - ---- -----------------
------ - ---- - ---- ------------
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
----- --- - ----------------------------------
----- ------- - -------------------- --------------
----------- ---- -- --------------------
--------- -- --------------------
--------------- -- ---------------- - -------
--
-------------------
----- ------- -- -
---------------------- - ---------------- -- ------------------------
--
------ --- -- ------------------
---在这个例子中，我们使用了 fromEvent 操作符来创建一个响应式事件源，当 search 输入框中的文本发生变化时，将触发 keyup 事件。然后我们通过 map 操作符将输入框的值映射为 HTTP 请求参数，并通过 switchMap 操作符将这个 HTTP 请求转换为对应的数据流。最后我们将获取到的 JSON 数据展示在页面上。
总结
在本文中，我们介绍了 RxJS 中两个常用的操作符：map 和 switchMap。map 操作符用于对流中的每个元素进行转换和映射，而 switchMap 操作符则将源数据流的每个元素映射到一个 Observable 上，然后将结果 Observable 合并到结果 Observable 流中。在实际应用中，我们需要根据具体的场景选择合适的操作符。希望本文能够对大家了解 RxJS 操作符有所帮助，同时也能够提高大家的前端开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb87fc5ad90b6d0420fd53