RxJS 中最引人注目的操作符：超详细的讲解
前言
RxJS 是一个强大的 JavaScript 库，它为我们提供了一套丰富的函数式编程 API，用于处理异步数据流。尽管 RxJS 中有很多操作符可供使用，但其中一些操作符的使用频率更高，而其中最引人注目的操作符无疑是 map、mergeMap、filter 和 switchMap。 在本文中，我们将重点讨论这几个操作符。
map 操作符
最简单的 RxJS 操作符之一是 map 操作符。这个操作符让你可以使用一个函数去转换一个 observable 里的每个值，就像 Array.prototype.map() 方法那样。map 操作符只需要一个函数作为参数，该函数接收一个值并返回另一个值。
下面是一个简单的示例，展示如何使用 map 操作符将一个数字字符串转换为数字：
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - --- - ---- ----------------- ----- -------- - ------- ---- ---------- ----------- ------- -- ---------------- -- -------------------------- -- -------------------- -- ------- -- -- -
在上面的示例中，of 操作符创建了一个数字字符串的 observable，map 操作符接收这个 observable 并使用 parseInt() 函数将字符串转换为数字。最后，我们使用 subscribe() 函数订阅了这个 observable 并打印出了转换后的数字。
mergeMap 操作符
mergeMap 操作符是 RxJS 中最常用的操作符之一，也是最令人困惑的操作符之一。它提供了一种将嵌套的 observables 扁平化的方法。当你有一个 observable 嵌套在另一个 observable 中时，你可以使用 mergeMap 操作符来将它们转化为一个单一的 observable。
下面是一个简单的示例，展示如何使用 mergeMap 操作符来获取多个后端 API 的数据:
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - -------- - ---- -----------------
--------- ---- -
--- -------
----- -------
-
--------- ---- -
--- -------
-------- -------
------- -------
-
-------- --------------- ------- -
------ -----
-------------------------------------------------------------------- --
----------
-
--
-
-------- ------------------------ ------- -
------ -----
--------------------------------------------------------------------------
----- -- ----------
-
--
-
----- ------ - -------- -- ---------
------------- --
---------------------
--------------- ----- --
-------------------------------
----------- ------- -- -- -------- ----- ---
-
-
-
-
--
----------------------- -- -------------------在上面的示例中，我们需要获取每个用户的所有博客文章，因此我们需要使用嵌套 observable。我们首先通过 from() 操作符创建一个 observable，该 observable 发出我们要获取用户的 ID 数组。然后我们使用 mergeMap() 操作符，将每个 ID 转换为一个包含该 ID 用户的 observable。然后我们使用一个嵌套的 mergeMap() 操作符将用户 observable 转换为一个包含该用户的所有博客文章的 observable。
请注意，mergeMap() 的结果是一个 observable，因此每次调用嵌套的 mergeMap() 操作符后，它不会立即发出新的数据。相反，它将所有的 observables 扁平化为一个单一的 observable，然后将其作为 mergeMap() 的结果返回。通过使用 map() 操作符将用户和他们的博客文章合并在一起，我们最终得到了想要的输出。
filter 操作符
filter 操作符是 RxJS 中最简单的操作符之一，它允许你使用一个函数来过滤观察到的值。这个函数接收一个值并返回一个布尔值。如果返回 true，则该值通过过滤器，如果返回 false，则该值被丢弃。filter 操作符只需要一个函数作为参数，该函数接收一个值并返回一个布尔值。
下面是一个示例，演示如何使用 filter 操作符过滤掉奇数：
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';
const numbers$ = of(1, 2, 3, 4, 5).pipe(filter((value) => value % 2 === 0));
numbers$.subscribe((value) => console.log(value));
// Output: 2, 4在上面的示例中，我们使用 of() 操作符创建一个数字的 observable，并使用 filter() 操作符过滤出偶数。最后，我们使用 subscribe() 函数订阅这个 observable 并打印出过滤后的结果。
switchMap 操作符
switchMap 操作符与 mergeMap 操作符类似，都是用于将嵌套的 observables 扁平化。不同的是，switchMap() 操作符只会发出最新的 observable 中的值，而不是所有 observable 的值。换句话说，switchMap() 操作符在每个新的事件发生时会取消前一个事件的订阅，重新订阅最新的 observable。
下面是一个简单的示例，展示如何使用 switchMap 操作符在搜索框中实现实时搜索：
-- -------------------- ---- -------
------ - ---------- -- - ---- -------
------ - ---- - ---- ------------
------ - ------------- ---------- --- - ---- -----------------
----- --------- - --------------------------------------
-------------------- --------
------
------------------
----------- -- ------------- -- -------------------------
----------------- --
---------------------------------------------------------------------
-
-
---------------- -- ---------------------------在这个示例中，我们首先创建一个 observable，它从 search-box 元素上触发 input 事件。然后，我们使用 debounceTime() 操作符来限制事件的传播频率，避免调用搜索 API 太多次。我们使用 map() 操作符从事件中提取查询字符串。最后，我们使用 switchMap() 操作符将每个新的查询字符串转换为一个新的 observable，并且每次事件发生后，它都会取消前一个请求并重新发送新的请求，最终输出搜索结果。
结论
在这篇文章中，我们深入探讨了 RxJS 中 map、mergeMap、filter 和 switchMap 这几个最引人注目的操作符。我们已经详细讲解了它们的使用方法和示例，相信读者已经掌握了这几个操作符。在日常的开发工作中，我们可以结合实际业务场景，灵活使用这几个操作符，以此来更好的处理异步数据流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67171e9cad1e889fe21ff8d0