前言
在前端开发中，处理异步操作是非常常见的。RxJS 是一个响应式编程库，它提供了丰富的工具来处理异步操作。其中比较常用的有 combineLatest 和 withLatestFrom 操作符。本文将详细介绍这两个操作符的应用。
combineLatest
combineLatest 操作符将多个 observables 合并成一个，它会在每个 observable 产生新值时都将各个 observables 的最新值组合成一个数组。
示例代码：
-- -------------------- ---- -------
------ - ------ ------------- - ---- -------
----- -------- - -------- ------
----- -------- - ----------- ------
----- -------- - ----------- ------
------------------------ --------- ----------
------------------ ----- ------ -- -
-------------------- ----- -------- ----- -------- ------
---
-- -----
-- ----- - ----- - ----- -
-- ----- - ----- - ----- -
-- ----- - ----- - ----- -
-- ---在上面的示例中，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 产生的最新值。
示例代码：
-- -------------------- ---- ------- ------ - ------ -------- - ---- ------- ------ - -------------- - ---- ----------------- ----- -------- - -------- ------ ----- -------- - --------------- -------------- ------------------------ ------ ----- -- -- ----- ---- --- -------------- ----- ---- -- -- - -------------------- ----- -------- ------ --- -- ----- -- ----- - ----- - -- ----- - ----- - -- ----- - ----- - -- ---
在上面的示例中，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