前言
RxJS 是基于观察者模式的 JavaScript 库，可以简化事件流和异步流的管理，帮助我们更好地处理异步数据。但是，RxJS 的操作符和组合操作符对于新手来说可能会有些棘手，因此本篇文章将会对 RxJS 的常用操作符和组合操作符进行介绍，并提供详细的用法示例，以供大家参考。
操作符
map
map 操作符是 RxJS 最常用的一个操作符，用于对上游发射的值进行转换，返回一个新的值。
import { of } from 'rxjs';
import { map } from 'rxjs/operators';
of(1, 2, 3).pipe(
map(value => value * 2)
).subscribe(value => {
console.log(value); // 2, 4, 6
});上面的代码中，我们使用了 of 操作符创建了一个 Observable 对象，它会发射 1、2 和 3 这三个值。接着我们使用 map 操作符，将这三个值都乘以 2，最后打印出来的值就是 2、4 和 6。
filter
filter 操作符可以用于对上游发射的值进行筛选，只保留满足条件的值。
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';
of(1, 2, 3).pipe(
filter(value => value > 1)
).subscribe(value => {
console.log(value); // 2, 3
});上面的代码中，我们使用了 of 操作符创建了一个 Observable 对象，它会发射 1、2 和 3 这三个值。接着我们使用 filter 操作符，只保留大于 1 的值，最后打印出来的值就是 2 和 3。
take
take 操作符可以用于限制上游发射的值的数量，只发射前 n 个值。
import { interval } from 'rxjs';
import { take } from 'rxjs/operators';
interval(1000).pipe(
take(3)
).subscribe(value => {
console.log(value); // 0, 1, 2
});上面的代码中，我们使用了 interval 操作符创建了一个 Observable 对象，它会每隔 1 秒发射一个值。接着我们使用 take 操作符，只发射前 3 个值，最后打印出来的值就是 0、1 和 2。
tap
tap 操作符可以用于在数据流中执行副作用，比如打印日志、记录调试信息等。
-- -------------------- ---- -------
------ - -- - ---- -------
------ - --- - ---- -----------------
----- -- --------
--------- -- -
------------------- ---- - - -------
---
--------- -- ----- - ---
--------- -- -
------------------ ---- - - -------
--
----------------- -- -
------------------- -- -- -- -
---上面的代码中，我们使用了 of 操作符创建了一个 Observable 对象，它会发射 1、2 和 3 这三个值。接着我们使用 tap 操作符，在进行数据转换前后打印出调试信息。最后打印出来的值就是 2、4 和 6。
debounceTime
debounceTime 操作符可以用于限制上游发射的值，忽略次数间隔小于指定时间的值。
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ------------ - ---- ----------------- ----- ----- - ----------------------------------- ---------------- -------------- ----------------- ----------------- -- - -------------------------------- ---
上面的代码中，我们使用了 fromEvent 操作符创建了一个 Observable 对象，它会在输入框每次输入时发射一个值，我们使用 debounceTime 操作符将这个流限制在每次输入之间间隔大于 500 毫秒的值。最后打印出来的值就是用户输入的文本。
组合操作符
merge
merge 操作符可以将多个 Observable 对象合并成一个，所有 Observable 对象都会同时发射数据。
-- -------------------- ---- ------- ------ - --------- ----- - ---- ------- ------ - ---- - ---- ----------------- ----- ------- - ----------------------------- ----- ------- - ----------------------------- -------------- ------------------------ -- - ------------------- -- -- -- -- -- - ---
上面的代码中，我们使用了 interval 操作符创建了两个 Observable 对象，它们都会每隔 1 秒发射一个值。接着我们使用 take 操作符限制了它们发射的值的数量。最后我们使用 merge 操作符将它们合并成一个 Observable 对象发射数据，最后打印出来的值就是 0、0、1、1 和 2。
forkJoin
forkJoin 操作符可以将多个 Observable 对象合并成一个，只有当所有 Observable 对象都发射完数据后才会发射一个数组作为结果。
import { forkJoin, of } from 'rxjs';
const source1 = of('Hello');
const source2 = of('World!');
forkJoin(source1, source2).subscribe(value => {
console.log(value); // ['Hello', 'World!']
});上面的代码中，我们使用了 of 操作符创建了两个 Observable 对象，它们分别会发射 'Hello' 和 'World!'。最后我们使用 forkJoin 操作符将它们合并成一个 Observable 对象发射数据，最后打印出来的值就是一个包含 'Hello' 和 'World!' 的数组。
concat
concat 操作符可以将多个 Observable 对象合并成一个，只有当前一个 Observable 对象完成后才会发射下一个 Observable 对象的数据。
import { concat, of } from 'rxjs';
const source1 = of(1, 2);
const source2 = of(3, 4);
concat(source1, source2).subscribe(value => {
console.log(value); // 1, 2, 3, 4
});上面的代码中，我们使用了 of 操作符创建了两个 Observable 对象，它们分别会发射 1、2 和 3、4。最后我们使用 concat 操作符将它们合并成一个 Observable 对象发射数据，最后打印出来的值就是 1、2、3 和 4。
zip
zip 操作符可以将多个 Observable 对象合并成一个，每个 Observable 对象发射的数据会被组合成一个数组并依次发射。
-- -------------------- ---- ------- ------ - --------- --- - ---- ------- ------ - ---- - ---- ----------------- ----- ------- - ----------------------------- ----- ------- - ----------------------------- ------------ ------------------------ -- - ------------------- -- --- --- --- --- --- ---------- ---
上面的代码中，我们使用了 interval 操作符创建了两个 Observable 对象，它们都会每隔 1 秒发射一个值。接着我们使用 take 操作符限制了它们发射的值的数量。最后我们使用 zip 操作符将它们合并成一个 Observable 对象发射数据，最后打印出来的值就是一个包含的数组，由每个 Observable 对象发射的数据组成。由于 source2 只发射了两个值，在最后一次发射时会填充 undefined。
总结
RxJS 操作符和组合操作符是 RxJS 中最为重要的特性，它们可以帮助我们更好地处理异步数据流并使代码更具可读性和可维护性。在本文中，我们介绍了 RxJS 中一些常用和重要的操作符和组合操作符，并提供了详细的用法示例。通过学习这些操作符和组合操作符，我们可以更好地使用 RxJS，并写出更好的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491716248841e9894f74fbe