RxJS 最不为人所知的 8 个操作符-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是一个针对异步和事件驱动编程的库，专注于数据流和变换。然而，RxJS 拥有非常多的操作符，因此我们可能只会使用一小部分。这篇文章将介绍 RxJS 中最不为人所知的 8 个操作符，以帮助您更好地了解 RxJS 的潜力。

exhaustMap

exhaustMap 操作符只有当前 observable 完成时才能建立下一次 observable。例如:

fromEvent(document, 'click').pipe(
  exhaustMap(() => interval(1000)),
).subscribe(console.log);

每当用户单击文档时，会建立一个名为 "click" 的 observable。exhaustMap 会阻止使用者点击文档中其他地方来创建更多的 "click" observable，并将每次创建 observable 的调用限制为每秒一次。

groupBy

groupBy 操作符将源 observable 按 key 分成多个 observable。例如:

-- -------------------- ---- -------
-------
    --- ----
    ----- -------
    ---- --
  --
  -
    --- ----
    ----- -------
    ---- --
  --
  -
    --- ----
    ----- ------
    ---- --
  --
--------
  -------------- -- ------------
-------------------------

此代码片段创建一个 observable，其中包含三个对象，每个对象都有一个 id，name 和 age 。 groupBy 操作符将这个 observable 按 age 的值拆分为多个 observable。因为年龄为 25 的人很多，所以我们得到两个匹配。年龄为 30 的 Bob 是一个组。

pairwise

pairwise 操作符为两个连续的值创建新值，并发出有序对。例如:

from([1, 2, 3, 4]).pipe(
  pairwise(),
).subscribe(console.log);

此代码片段创建了一个 observable，包含四个数字。pairwise 操作符将源 observable 中的数据拆分为连续的值对(1, 2)，(2, 3)，(3, 4)。因此，我们得到三对值对。

partition

partition 操作符将源 observable 拆分为两个 observable，一个满足条件，一个不满足条件。例如:

from([1, 2, 3, 4]).pipe(
  partition(value => value % 2 == 0),
).subscribe(console.log);

此代码片段创建了一个 observable，包含四个数字。 partition 操作符将源 observable 拆分为两个 observable，一个包含偶数，一个包含奇数。

race

race 操作符只是从多个 observables 中选择第一个发出值的 observable。例如:

const a = interval(1000).pipe(mapTo('a'));
const b = interval(2000).pipe(mapTo('b'));
const c = interval(3000).pipe(mapTo('c'));

race(a, b, c).subscribe(console.log);

此代码片段创建了三个 observable，每个 observable 发出一个标记字母 a，b 或 c。 race 操作符返回第一个发射值的 observable，因此我们将看到大约在 1 秒钟内收到字母 a。

scan

scan 操作符类似 reduce，但发出中间值。例如:

from([1, 2, 3, 4]).pipe(
  scan((accumulator, currentValue) => accumulator + currentValue, 0),
).subscribe(console.log);

此代码片段创建了一个 observable，包含四个数字。 scan 操作符计算并发出中间值，这里是 1，3，6 和 10，之后发出最终累加值：10。

switchMapTo

switchMapTo 操作符只会建立一个 observable，因此任何其他处理将被中断。这个操作符可以用于限制流量，例如:

fromEvent(document, 'click').pipe(
  switchMapTo(interval(1000)),
).subscribe(console.log);

每当用户单击文档时，将建立一个产生可观察的事件 “click”，并切换为每秒发出一个间隔值。

windowTime

WindowTime 操作符创建一系列的 observables，每个 observables 具有相同的持续时间。例如:

interval(1000).pipe(
  windowTime(3000),
  switchMap(obs => obs.pipe(toArray())),
).subscribe(console.log);

此代码片段创建定时器 interval，每秒发出一个计数器。 windowTime 操作符创建一个 observable“窗口”，此代码片段中为 3 秒。也就是说，它每隔 3 秒就会创建一个新的 observable。 switchMap 将这些数据打包到一个数组中以进行输出。每三秒，我们得到一个数组，包含 3 个值，例如 [0, 1, 2], [3, 4, 5] 等等。

结论

RxJS 拥有非常丰富的操作符，但很多都鲜为人知。在本文中，我们介绍了 RxJS 中最不为人所知的 8 个操作符，并提供相关示例代码。学习和熟练使用这些操作符可以帮助我们更好地了解 RxJS 的潜力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67398329317fbffedf17266e