RxJS 中操作符 combineLatest 和 withLatestFrom 的区别

前言

在 RxJS 中，操作符是非常重要的一部分。它们可以让我们更加方便地处理数据流，实现各种需求。在 RxJS 中，有两个操作符是非常常用的，它们分别是 combineLatest 和 withLatestFrom。它们的作用类似，但是在具体实现上有一些区别。在本文中，我们将详细介绍这两个操作符的区别，并给出一些示例代码，帮助读者更好地理解。

combineLatest

combineLatest 是 RxJS 中的一个操作符，它可以将多个 Observable 的数据流合并成一个 Observable，每当任意一个 Observable 发出新的值时，它就会把所有 Observable 最新的值组合成一个数组，然后发出这个数组。下面是一个示例代码：

import { combineLatest, timer } from 'rxjs';
import { map } from 'rxjs/operators';

const source1$ = timer(0, 1000);
const source2$ = timer(500, 1000);

combineLatest([source1$, source2$]).pipe(
  map(([val1, val2]) => `${val1} - ${val2}`)
).subscribe(console.log);

在上面的代码中，我们创建了两个 Observable，它们分别是 source1$ 和 source2$。source1$ 会每隔一秒钟发出一个值，而 source2$ 会每隔一秒半发出一个值。然后我们使用 combineLatest 操作符将这两个 Observable 合并成一个 Observable，并使用 map 操作符将每个 Observable 最新的值拼接成一个字符串。最后我们订阅这个 Observable，并打印出它发出的值。

运行上面的代码，我们可以看到它的输出如下：

0 - 0
1 - 0
1 - 1
2 - 1
2 - 2
3 - 2
3 - 3
4 - 3
4 - 4
5 - 4

我们可以看到，combineLatest 操作符将 source1$ 和 source2$ 的最新值组合成了一个数组，并发出了这个数组。

withLatestFrom

withLatestFrom 也是 RxJS 中的一个操作符，它也可以将多个 Observable 的数据流合并成一个 Observable。但是它的实现方式与 combineLatest 有所不同。具体来说，withLatestFrom 操作符会等待一个 Observable 发出值，然后将它的值与其他 Observable 最新的值组合成一个数组，然后发出这个数组。下面是一个示例代码：

import { timer } from 'rxjs';
import { withLatestFrom, map } from 'rxjs/operators';

const source1$ = timer(0, 1000);
const source2$ = timer(500, 1000);

source1$.pipe(
  withLatestFrom(source2$),
  map(([val1, val2]) => `${val1} - ${val2}`)
).subscribe(console.log);

在上面的代码中，我们创建了两个 Observable，它们分别是 source1$ 和 source2$，它们的实现方式与上面的示例代码相同。然后我们使用 withLatestFrom 操作符将 source2$ 和 source1$ 合并成一个 Observable，并使用 map 操作符将它们的最新值拼接成一个字符串。最后我们订阅这个 Observable，并打印出它发出的值。

运行上面的代码，我们可以看到它的输出如下：

0 - 1
1 - 1
2 - 2
3 - 2
4 - 3
5 - 3
6 - 4
7 - 4
8 - 5
9 - 5

我们可以看到，withLatestFrom 操作符先等待 source1$ 发出值，然后将它的值与 source2$ 的最新值组合成了一个数组，并发出了这个数组。在后续的值发出过程中，它会等待 source1$ 再次发出值，然后再将它的值与 source2$ 的最新值组合成一个数组，并发出这个数组。

区别

从上面的示例代码中，我们可以看到 combineLatest 和 withLatestFrom 的实现方式略有不同。具体来说，combineLatest 操作符会在任意一个 Observable 发出值时，将所有 Observable 的最新值组合成一个数组，并发出这个数组；而 withLatestFrom 操作符会等待一个 Observable 发出值，然后将它的值与其他 Observable 的最新值组合成一个数组，并发出这个数组。因此，它们的区别在于组合的时机不同。

总结

本文介绍了 RxJS 中的两个操作符，它们分别是 combineLatest 和 withLatestFrom。它们的作用类似，但是在具体实现上有一些区别。combineLatest 操作符会在任意一个 Observable 发出值时，将所有 Observable 的最新值组合成一个数组，并发出这个数组；而 withLatestFrom 操作符会等待一个 Observable 发出值，然后将它的值与其他 Observable 的最新值组合成一个数组，并发出这个数组。在实际开发中，我们可以根据具体需求选择使用哪个操作符。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65c090f0add4f0e0ffa968b2