前言
在前端开发中，处理异步操作是非常常见的。RxJS 是一个响应式编程库，它提供了丰富的工具来处理异步操作。其中比较常用的有 combineLatest 和 withLatestFrom 操作符。本文将详细介绍这两个操作符的应用。
combineLatest
combineLatest 操作符将多个 observables 合并成一个，它会在每个 observable 产生新值时都将各个 observables 的最新值组合成一个数组。
示例代码：
import { timer, combineLatest } from 'rxjs';
const source1$ = timer(0, 1000);
const source2$ = timer(1000, 1000);
const source3$ = timer(2000, 1000);
combineLatest([source1$, source2$, source3$])
.subscribe(([val1, val2, val3]) => {
console.log('val1:', val1, 'val2:', val2, 'val3:', val3);
});
// 输出结果：
// val1: 0 val2: 1 val3: 2
// val1: 1 val2: 1 val3: 2
// val1: 2 val2: 2 val3: 2
// ...在上面的示例中，combineLatest 接收一个数组参数，其中每个元素都是一个 observable。当任何 observable 产生新值时，combineLatest 会组合所有 observables 的最新值，并且按照数组的顺序输出。在上面的示例中，source1$ 产生的值是 [0, 1, 2, ...]，source2$ 产生的值是 [1, 2, 3, ...]，source3$ 产生的值是 [2, 3, 4, ...]。所以当 source1$ 产生新值时，输出的结果就是 val1: [source1$ 最新值] val2: [source2$ 最新值] val3: [source3$ 最新值]。
可以看到，combineLatest 操作符非常适合处理多个 observables 同时产生作用的情况。例如当多个表单元素的值都发生变化时，可以使用 combineLatest 组合所有表单元素的值，然后提交表单。
withLatestFrom
withLatestFrom 操作符与 combineLatest 类似，也是将多个 observables 合并成一个。但是 withLatestFrom 只会在其中一个 observable 产生新值时才会产生新的值，而不是在每个 observable 产生新值时。新值由一个 project 函数计算得到，该函数接收一个数组参数，其中包含了所有源 observables 产生的最新值。
示例代码：
import { timer, interval } from 'rxjs';
import { withLatestFrom } from 'rxjs/operators';
const source1$ = timer(0, 1000);
const source2$ = interval(2000);
source1$.pipe(
withLatestFrom(source2$, (val1, val2) => ({ val1, val2 }))
).subscribe(({ val1, val2 }) => {
console.log('val1:', val1, 'val2:', val2);
});
// 输出结果：
// val1: 0 val2: 1
// val1: 1 val2: 3
// val1: 2 val2: 5
// ...在上面的示例中，withLatestFrom 接收一个或多个 observable 参数，还接收一个 project 函数参数。project 函数接收一个数组参数，其中包含了每个源 observable 产生的最新值。在本例中，source1$ 产生的值是 [0, 1, 2, ...]，source2$ 产生的值是 [1, 3, 5, ...]。所以当 source1$ 产生新值时，输出的结果就是 val1: [source1$ 最新值] val2: [source2$ 最新值]。在这个例子中，val1 和 val2 因为 project 函数的映射关系组合成了一个包含这两个值的对象。
withLatestFrom 操作符在处理多个 observables 同时“选取”最新值时非常有用。例如当一个页面需要在切换语言时更新界面元素的样式时，可以使用 withLatestFrom 选取用户当前语言设置的 observable 与需要更新的元素的 observable，然后根据选取的结果来更新元素的样式。
总结
combineLatest 和 withLatestFrom 操作符是 RxJS 中常用的工具，用来处理多个 observables 同时产生作用或被选取的情况。它们都能够迅速合并多个 observables，同时提供了丰富的参数选项和灵活的使用方式。在实际开发中，这两个操作符可以帮助我们更好地处理异步操作和响应式编程，使代码更加简洁清晰，易于维护。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af7f69add4f0e0ff8f0970