简介
RxJS 是一个强大的 JavaScript 库，用于响应式编程。它提供了一组操作符，可以帮助开发人员更轻松地处理数据流。其中两个操作符是 combineLatest 和 withLatestFrom。这两个操作符可以在不同的组合场景中帮助我们更好地组合数据流。本篇文章将介绍这两个操作符的用法，比较它们的区别，并提供一些示例代码。
combineLatest 操作符
combineLatest 操作符将多个数据流合并成一个新的数据流。这个操作符会在所有数据流中至少有一个值可用时，返回一个新的数据流，该数据流会发射所有数据流的最新值的数组。
使用方法
以下是 combineLatest 操作符的使用方法：
const source1$ = of('a', 'b', 'c');
const source2$ = of(1, 2, 3);
const result$ = combineLatest(source1$, source2$);
result$.subscribe(
([letter, number]) => console.log(letter, number),
);在这个例子中，我们通过 of 操作符创建两个数据流 source1$ 和 source2$。然后我们将这两个数据流传入 combineLatest 操作符，创建了一个新的数据流 result$。最后，我们订阅了 result$ 数据流，并在其中打印出每个数据流最新的值。
示例
以下是一个更复杂的例子，演示 combineLatest 操作符如何处理一个表单：
-- -------------------- ---- -------
----- --------- - ---------------------------------------------- --------
--------------- -- ---------------------
----- --------- - ---------------------------------------------- --------
--------------- -- ---------------------
----- ------ - ------------------------------------------- ---------
----- ----- - ------------------------- ---------- --------
------
------------------ ---------- -- --------------- - - -- --------------- - ---
------ -- ----------------- -------------
-
------------------在这个例子中，我们通过 fromEvent 操作符创建了三个数据流：
username$表示用户名输入框的值。password$表示密码输入框的值。login$表示提交表单的按钮。
然后，我们使用 combineLatest 操作符将这三个数据流合并成一个新的数据流 form$。当提交按钮被点击时，form$ 数据流会发射所有表单元素的最新值的数组。
接下来，我们使用 filter 运算符过滤掉用户名和密码输入框的值为空的情况。最后，我们使用 tap 运算符在表单被提交时打印一条消息。在订阅 form$ 数据流时，我们不需要处理值，因此只传递了一个空的回调函数。
withLatestFrom 操作符
withLatestFrom 操作符允许你获取一个数据流的最新值，并与另一个数据流中的值一起使用。与 combineLatest 操作符不同，withLatestFrom 操作符只有当第二个数据流发出时才会发射值，而不是等到所有数据流都发出时。因此，它更适合在需要使用最新值的情况下，而不是需要使用所有历史值的情况下。
使用方法
以下是 withLatestFrom 操作符的使用方法：
-- -------------------- ---- -------
----- -------- - ----- -- ---
----- -------- - -------------------------------------------- --------
--------------- -- ---------------------
----- ------- - ----------------------------------------
------------------
--------- ------- -- ------------------- -------
--在这个例子中，我们使用 of 运算符创建了一个数据流 source1$。然后我们使用 fromEvent 运算符创建了另一个数据流，该数据流代表了一个单击按钮事件，并通过 map 运算符将事件转换为目标元素的值。接下来，我们使用 withLatestFrom 操作符将 source1$ 数据流和 source2$ 数据流合并到一起，创建了一个新的数据流 result$。最后，我们订阅 result$ 数据流，并在其中打印出 source1$ 的最新值和 source2$ 中最新的值。
示例
以下是一个更复杂的例子，演示 withLatestFrom 操作符如何在图像上传表单中使用。在这个例子中，我们想要在用户选择图像后获取图像的 URL 并显示在页面上。
-- -------------------- ---- -------
----- --------- - ------------------------------------------ ---------
------
--------- -- -----------------------
----------- -- --------------------------------
------------- -- -------- --------------- -- -
----- ------ - --- -------------
------------- - -- -- -
-----------------------
--
---------------------------
-----
--
----- ------- - -------------------------------------------- ---------
----- ------------------- - ---------------
------------------------------------- -- ----------------------
---------- ------- -- -----
--
--------------------------------- -- -
----- --- - ------------------------------
------- - ----
-------------------------------
---在这个例子中，我们使用 fromEvent 操作符创建一个数据流，该数据流表示用户上传图像文件的操作，并使用 map 运算符将事件转换为文件对象。然后，我们使用 filter 运算符过滤掉不是图像的文件类型。接下来，我们使用 mergeMap 运算符将文件对象转换成图像 URL，同时使用 withLatestFrom 操作符将这个 URL 数据流与上传按钮的数据流合并到一起。最后，我们在 subscribe 回调函数中创建一个新的图像元素，并将其添加到页面中。
操作符比较
combineLatest 和 withLatestFrom 操作符都允许我们在不同的数据流之间进行组合。它们的区别在于 combineLatest 操作符需要所有数据流至少有一个值可用才能发射值，而 withLatestFrom 操作符只需要第二个数据流发射值就可以发射值。
这些操作符的不同用途如下：
combineLatest操作符用于需要同时考虑多个流的值的情况，例如表单提交。withLatestFrom操作符用于在一个数据流中使用另一个数据流的最新值的情况，例如图像上传表单。
结论
在本文中，我们介绍了 RxJS 中的 combineLatest 和 withLatestFrom 操作符。我们比较了它们之间的区别，并提供了一些示例代码。希望这篇文章可以帮助你更好地理解这两个操作符的使用方法，以及在日常开发中如何选择它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e7819e30a6581ceb49898