RxJS 中的 combineLatest 和 withLatestFrom 的异同
RxJS 是一个强大而灵活的 JavaScript 库，用于处理异步数据流。在 RxJS 中，combineLatest 和 withLatestFrom 是两个非常常用的操作符。虽然它们大致具有相似的功能，但实际上它们的行为是有所不同的。
在本篇文章中，我们将详细介绍 RxJS 中的 combineLatest 和 withLatestFrom 的异同，并提供一些示例代码以帮助你更好地理解。
一、combineLatest
combineLatest 操作符的作用是将多个 Observable 组合在一起，以创建一个新的 Observable，它会同时发出所有 Observable 中的最新值。
语法：
combineLatest<ObsArray, ResultSelector>( ...sources: ObsArray, resultSelector: ResultSelector ): Observable<ObsArray extends any[] ? any[] : ObsArray>;
这里的 ObsArray 是一个可以包含多个待组合 Observable 的数组，而 resultSelector 是一个可选的回调函数，该函数将组合后的值转换为任何你希望的形式。如果未提供 resultSelector，则将返回所有 Observable 的数组，其顺序与源中的顺序相同。
示例：
-- -------------------- ---- ------- ------ - -------------- -- - ---- ------- ------ - --- - ---- ----------------- ----- ----- - ------- ---- ----- ----- ----- - ----- -- --- ----- ----- - ------- ---- ----- -------------------- ------ ------ -------------- -- --- -- - - - - --- ------------------------ -- ------- -- ----- -- ----- -- ----- -- ----- -- -----
在上面的示例中，我们创建了三个 Observable，分别是 obs1$, obs2$ 和 obs3$。我们使用 combineLatest 将这三个 Observable 组合成一个新的 Observable，并使用 map 操作符将组合后的值转换为字符串。最后我们使用 subscribe 订阅它。
可以看到，combineLatest 输出了所有可观察对象的最新值组成的数组。当有新的值发出时，它会将这些值组合，并重新发出组合后的值。
二、withLatestFrom
withLatestFrom 操作符的作用也是将多个 Observable 组合起来，但不同的是它只会发出最近一次发出的值，并且是在主要 Observable 发出值的时候才进行组合。
语法：
withLatestFrom<T, R>( ...inputSources: readonly any[] ): OperatorFunction<T, [T, ...R[]]>;
其中 T 是源 Observable 的类型，R 是指定的其他 Observable 的类型集合。
示例：
-- -------------------- ---- ------- ------ - --------- -- - ---- ------- ------ - --------------- ---- - ---- ----------------- ----- ----- - ----------------------------- ----- ------- - ------- ---- ----- ----------------------------------------------------------- -- ------- -- --- ---- -- --- ---- -- --- ---- -- --- ---- -- --- ----
在上面的示例中，我们创建了两个 Observable，一个主要的 observable（main$）每隔一秒会发出一个数字，还有一个次要的 observable（second$）发出三个字符串。我们使用 withLatestFrom 将这两个 Observable 组合成一个新的 Observable 并进行订阅。在主要 Observable 发出值时，withLatestFrom 会捕获最近一次 secondary$ 发出的值，并将其作为组合后的新值进行发射。
三、异同点
- combineLatest 和 withLatestFrom 都是将多个 Observable 进行组合，都可以组合多个 Observable 成一个新的 Observable。
- 不同的是，combineLatest 会随着所有 Observable 的最新值的更新而更新，并发出一个新的值。而 withLatestFrom 会在主要 Observable 发出值的时候，与次要的值组合成一个新的值。
- 另外，combineLatest 的发射频率更高，因为它会在任何一个组合的 Observable 发出新值时都会发出一个新的组合值。而 withLatestFrom 只会在主要的 Observable 中发出值的时候才发出一个新的值。
四、总结
在 RxJS 中，combineLatest 和 withLatestFrom 是两个非常有用的操作符。combineLatest 可以组合多个 Observable 的最新值，而 withLatestFrom 组合的是主要 Observable 发出的最新值和次要 Observable 最近一次发出的值。因此，在选择合适的操作符时，需要根据不同的具体场景进行选择。同时，也需要注意传递进去的 Observable 个数和顺序，以及合适的类型配合使用。
以上就是本文中关于 RxJS 中 combineLatest 和 withLatestFrom 的异同点的介绍，希望对您有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ee4d9968c7c53b0110f68