在 Angular 中，RxJS 是一个非常有用而强大的工具库，它为我们提供了丰富的、函数式的响应式编程工具，这使得我们能够更加优雅的处理异步事件，并组织我们的代码以更好的复用并减少业务逻辑间代码的耦合度。
在 RxJS 中，操作符是其最为核心的部分，它们用于执行各种各样的数据转换、过滤、合并、扁平化等操作。下面是一些常用的 RxJS 操作符使用技巧，以及如何正确地应用它们。
map 操作符
map 操作符是最基础而且普遍使用的操作符之一。它能够接收一个 Observable 作为输入并返回一个新的 Observable，这个新的 Observable 中包含了应用此操作符后的每个数据项。
例如：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ------ - --- - ---- ----------------- ----- ------ - --- ----------------------------- -- - ------------------- ------------------- ------------------- --- ----------------- -- - - -------------------- -- --------------------- -- ----- -- -
在上面的例子中，我们创建了一个 Observable，它会输出 1、2 和 3。接着我们通过使用 map 操作符，将每个数据项乘以 2，并输出结果。
需要注意的是，使用 map 操作符后，我们可以返回任何我们想要的类型，而不仅仅是数字类型，这一点在开发中尤其有用。
filter 操作符
filter 操作符也是普遍使用的操作符之一。与 map 操作符类似，它能够接收一个 Observable 作为输入，将其中的数据项进行过滤，并输出一个新的 Observable。
例如：
-- -------------------- ---- ------- ------ - ---------- - ---- ------- ------ - ------ - ---- ----------------- ----- ------ - --- ----------------------------- -- - ------------------- ------------------- ------------------- --- -------------------- -- - - - --- -------------------- -- --------------------- -- ----
在上面的例子中，我们创建了一个 Observable，它会输出 1、2 和 3。接着我们通过使用 filter 操作符，筛选出其中的偶数，并输出结果。
merge 操作符
merge 操作符可以将多个 Observable 组合在一起，并将它们发出的所有数据项输出到一个新的 Observable 中。
例如：
import { Observable, interval, merge } from 'rxjs';
const source1 = interval(1000);
const source2 = interval(2000);
merge(source1, source2).subscribe(result => console.log(result)); // 输出：0, 0, 1, 2, 1, 4, 2, 6 ...在上面的例子中，我们创建了两个 Observable，一个每隔一秒会输出一次 0、1、2 ...，而另一个每隔两秒会输出一次 0、1、2...，接着我们把这两个 Observable 组合在一起，并输出结果。
switchMap 操作符
switchMap 操作符是很常用的操作符之一。它能够接收一个 Observable 作为输入，并返回一个新的 Observable，这个新的 Observable 是使用一个提供的函数来映射每个数据项的结果。
例如：
import { fromEvent } from 'rxjs';
import { switchMap, map } from 'rxjs/operators';
const button = document.getElementById('button');
const source = fromEvent(button, 'click');
source.pipe(switchMap(() => interval(1000)), map(x => `当前时间为：${x}`)).subscribe(result => console.log(result)); // 输出：当前时间为：1, 当前时间为：2, 当前时间为：3 ...在上面的例子中，我们监听了 HTML 页面上的一个按钮，并创建了一个点击事件的 Observable。接着我们使用 switchMap 操作符把每个点击事件映射到一个每隔一秒钟输出一次数字的 Observable 上，并使用 map 操作符把数字映射成一个字符串输出。
自定义操作符
除了上述操作符以外，RxJS 还提供了许多其他有用的操作符，同时我们也可以自己定义一些操作符。自定义操作符通常以 pipe 形式被调用，并返回一个新的 Observable。
例如，我们可以创建一个叫做 log 的操作符，用于输出所有数据项：
-- -------------------- ---- -------
------ - ---------- - ---- -------
------ - --- - ---- -----------------
-------- ----- -
------ ---------------- ---------------- -
------ -------------------- -- -
------------------
------ -----
----
--
-
----- ------ - --- ----------------------- -- -
-------------------
-------------------
-------------------
---
------------------------------- -- ----- -- -在上面的例子中，我们定义了一个 log 操作符，它会依次输出 Observable 中的每个数据项，并返回相同的 Observable，这样我们以后在使用这个 Observable 时，就能够不断地看到输出结果了。
总结
在本文中，我们介绍了 Angular 中 RxJS 常用的操作符，包括 map、filter、merge、switchMap 等。了解这些操作符的使用技巧，能够帮助我们更加高效地处理异步事件，并优雅地组织我们的代码。此外，我们还展示了如何自己来定义 RxJS 操作符，以及如何将它们应用到我们的业务逻辑中。我们希望这篇文章对你有所帮助，并能成为你日常工作中的参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c4cb7f83d39b4881836cd8