RxJS 5是一个强大的JavaScript库，用于在前端应用程序中管理异步代码。它提供了许多不同的操作符，包括高级组合操作符，可以使开发人员更容易地处理多个异步数据源。
在本文中，我们将介绍RxJS 5的高级组合操作符，并提供一些示例代码，以帮助您更好地了解有关如何使用这些操作符的详细信息。
什么是高级组合操作符？
RxJS 5的高级组合操作符是一组操作符，可用于处理多个异步数据源，并使其更容易组合和操作。这些操作符包括concatMap，mergeMap，switchMap和exhaustMap。
这些操作符是基于Observables的概念构建的，可用于处理任何类型的数据。使用它们可以使您的代码更具表现力和可读性，并使其更易于维护。
concatMap
concatMap操作符将源Observable的每个源值转换为Observable并将其展开，一次处理一个源观察结果，然后按顺序等待每个操作完成。
下面是一个使用concatMap来获取GitHub用户存储库的示例代码：
-- -------------------- ---- -------
------ - -- - ---- -------
------ - ---------- --- - ---- -----------------
----- ------------ - -------- -- -
------ -------------------------------------------------------
-------------- -- -----------------
--
--------------------
------
------------------ -- ------------------------
--------- -- -------------- -- -----------
-
------------------------在这个例子中，我们使用concatMap来获取GitHub用户存储库。然后，我们使用map操作符将结果转换为存储库名称的数组，最后将结果输出到控制台。
mergeMap
mergeMap操作符将源Observable的每个源值转换为Observable，并同时将它们展开以进行同时处理。此操作符与concatMap类似，但它不会按顺序等待每个操作完成。
下面是一个使用mergeMap来获取GitHub用户存储库的示例代码：
-- -------------------- ---- -------
------ - -- - ---- -------
------ - --------- --- - ---- -----------------
----- ------------ - -------- -- -
------ -------------------------------------------------------
-------------- -- -----------------
--
-------------------- ---------- --------
------
----------------- -- ------------------------
--------- -- -------------- -- -----------
-
------------------------在这个例子中，我们使用mergeMap通过用户名获取GitHub用户的存储库。然后，我们使用map操作符将结果转换为存储库名称的数组，最后将结果输出到控制台。
switchMap
switchMap操作符将按顺序处理每个源观察结果，并在新结果到达时取消先前的结果。如果您只对最新结果感兴趣，则可以使用此操作符。
例如，假设您有一个文本输入框，它允许用户搜索GitHub上的存储库。在用户为存储库名称输入文本时，您可能会发起多个请求。但是，如果用户已经开始了一次新的搜索，您可能希望取消先前的搜索，并仅查看新的结果。
下面是一个使用switchMap进行搜索的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- -------
------ - ---- - ---- ------------
------ - ------------- --------------------- --------- - ---- -----------------
----- ----------- - --------------------------------
----- ------------ - ---------------------- --------
------
------------------
-----------------------
--------------- -- -
----- ----- - -------------------
------ --------------------------------------------------------------
---
------------ -- ------------------------
--
---------------------------- -- -
-------------------
---在这个例子中，我们使用switchMap来执行存储库搜索。然后，我们使用map操作符将结果转换为存储库项的数组，并将其输出到控制台。
exhaustMap
exhaustMap操作符完成第一个observable所发送的信息，然后将暂停所有的新来的observable，直到第一个observable完成。
下面是一个使用exhaustMap进行操作的示例代码：
import {fromEvent, interval} from 'rxjs';
import {exhaustMap, mapTo, take} from 'rxjs/operators';
const sourceInterval = interval(1000).pipe(take(5));
const click = fromEvent(document, 'click');
const example = click.pipe(exhaustMap((e) => sourceInterval.pipe(mapTo('Clicked!'))));
example.subscribe(console.log);我们使用exhaustMap，每次点击事件产生一个Observable，第一个observable完成前暂停所有的新来的observable。在这个例子中，我们定义了click作为事件源，单击后，第一个Observable发送一条“Clicked!” 的信息，然后开始计时器，计时器计时1秒，每秒产生一条消息，一共再产生5条消息记录。但由于exhaustMap操作符进行的“倾斜”操作，我们发现当有点击事件存在时，计时器计时器一直是暂停的。
结论
RxJS 5的高级组合操作符是非常强大和灵活的，可以帮助您更轻松地处理多个异步数据源。通过阅读这份文章，您已经学习了如何使用一些最重要的高级组合操作符，并使用示例代码演示了如何将它们应用于常见的开发场景。
希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f65e84c5c563ced5840a9e