在 RxJS 中，combineLatest 操作符可以将多个 Observables 的最新值组合成一个新的 Observable，输出的值为一个数组，数组中包含了每个 Observable 的最新值。
基本语法
combineLatest 操作符的基本语法如下：
combineLatest(...args: Array<Observable>): Observable
参数 args 为一个 Observable 数组，输出的 Observable 的值为一个数组，数组中包含了 args 数组中每个 Observable 的最新值。
示例代码
-- -------------------- ---- ------- ------ - -------------- -- - ---- ------- ------ - --- - ---- ----------------- ----- ------------ - ------------ ----- ------------ - ----------- ----- ------------ - -------------------- --------------------------- ------------- ------------------- ------------- ------- -------- -- ----------- --------- ------------ ------------------------- -- --------- ---- --------------
使用场景
combineLatest 操作符可以用于需要多个 Observables 最新值组合的场景，比如表单中多个输入框的值联动更新、页面中多个网络请求完成后更新页面等等。
接下来，我们会对 combineLatest 操作符进行更深入的了解，包括参数列表的变化、丢失值的处理、取消订阅等等。
参数列表
除了上面提到的基本语法外，combineLatest 操作符还有其他两种参数列表，分别如下：
// 参数列表 2 combineLatest(observables: Array<Observable>, resultSelector: Function): Observable // 参数列表 3 combineLatest(...observables: Array<Observable | Function>): Observable
其中，参数列表 2 可以传入 resultSelector 函数，作为一个映射函数，将组合后的值进行处理。
示例代码：
import { combineLatest, of } from 'rxjs';
const observable1$ = of('Hello');
const observable2$ = of('RxJS');
const observable3$ = of('combineLatest');
combineLatest([observable1$, observable2$, observable3$], ([value1, value2, value3]) => `${value1}, ${value2} ${value3}!`).subscribe(console.log); // 输出：Hello, RxJS combineLatest!参数列表 3 则可以用来简化传递多个 Observables 的语法，参数列表中可以混合传递 Observable 和 Function，前面的 Observables 等价于使用 combineLatest 操作符处理后的 Observable。
示例代码：
-- -------------------- ---- ------- ------ - -------------- -- - ---- ------- ----- ------------ - ------------ ----- ------------ - ----------- ----- ------------ - -------------------- -------------- ------------- ------------- ------------- --------- ------- -------- -- ----------- --------- ----------- ------------------------- -- --------- ---- --------------
丢失值的处理
在 combineLatest 操作符中，当多个 Observables 中存在缺失值时，也会输出组合的值，但是缺失值会被替换为 undefined。
示例代码：
import { combineLatest, of } from 'rxjs';
const observable1$ = of('Hello');
const observable2$ = of(undefined);
const observable3$ = of('combineLatest');
combineLatest(observable1$, observable2$, observable3$).subscribe(console.log); // 输出：['Hello', undefined, 'combineLatest']如果不想要 undefined 值，可以通过 skipWhile 和 take 操作符进行过滤操作。
示例代码：
-- -------------------- ---- ------- ------ - -------------- -- - ---- ------- ------ - ---------- ---- - ---- ----------------- ----- ------------ - ------------ ----- ------------ - -------------- ----- ------------ - -------------------- --------------------------- ------------- ------------------- ---------------- -- ----------------- -- ----- --- ------------ ------- ------------------------- -- ------------ ----------------
取消订阅
由于 combineLatest 操作符会订阅多个 Observables，因此有时候需要取消对某个 Observable 的订阅。
例如，当某个 Observable 信息源更新速度过慢，会导致其他 Observables 信号等待的时间变长，此时可以使用 withLatestFrom 操作符在代码执行前过滤这个 Observable，达到节省等待时间的目的。
示例代码：
-- -------------------- ---- ------- ------ - -------------- --- ------- - ---- ------- ------ - -------------- - ---- ----------------- ----- ------------ - ------------ ----- ------------ - ----------- ----- ------------ - --- ---------- --------------------------- ------------- ---------------------------------------------- --------------------------------------- ------------- -- - ----------------------------------- -- -----
在上面的示例代码中，我们使用了 withLatestFrom 操作符，将 observable1$ 和 observable2$ 进行了过滤，避免了等待 observable3$ 更新的时间。
但是当 observable3$ 已经完成更新，我们仍然继续订阅了 observable1$ 和 observable2$，这可能会造成不必要的内存开销。
因此，我们可以使用 takeUntil 操作符在不需要继续订阅时取消订阅。
示例代码：
-- -------------------- ---- ------- ------ - -------------- --- ------- - ---- ------- ------ - --------------- --------- - ---- ----------------- ----- ------------ - ------------ ----- ------------ - ----------- ----- ------------ - --- ---------- -------------- ------------- ------------- ---------------------------------------------- --------------- ----------------------- ------------------------- ------------- -- - ----------------------------------- -- -----
在上面的示例代码中，我们使用了 takeUntil 操作符，在 observable3$ 发出下一个信号时，取消对三个 Observables 的订阅。
总结
combineLatest 操作符和 zip 操作符类似，不同的是 combineLatest 操作符输出的值为所有输入 Observables 的最新值，而 zip 操作符输出的值为同步后的所有值。
使用 combineLatest 操作符可以简化多个 Observables 的使用场景，对于丢失值的处理和取消订阅，也有对应的处理方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64561b96968c7c53b095fc5e