介绍
RxJS 是一个非常流行的响应式编程的 JavaScript 库。它基于观察者模式，用于处理异步数据流。RxJS 中由各种操作符组成，这些操作符可以用于数据的转换、过滤、组合等操作。在这些操作符中，scan 是一种非常强大的流处理变换操作符。
scan 允许我们对流中的值进行聚合，然后将结果发射出去。scan 与数组的 reduce 方法类似，不同之处在于 reduce 是在流中的所有值都被发射后才会发出结果，而 scan 是在每个值被发射时都会发出聚合结果。
在本文中，我们将深入探讨 RxJS 的 scan 操作符，包括其执行方式、用法和示例等。
执行方式
scan 操作符是一个类似于 reduce 的高阶操作符。它接收一个函数，该函数接受两个参数：先前累积的值和当前流中的值，并返回一个新的累积值。scan 对流中的每个值调用这个函数，并发出函数返回的新的累积值。
下面是一个示例的执行过程：
------ - ----------------------------
---------- ------ -- --- - ------ --
------ - ----------------------------代码中，输入流包含 1、2、3、4、5 这五个值，分别用“-”分隔开。我们的操作符是 scan，其接收两个参数：第一个参数是一个函数，用于将前两个值累积在一起；第二个参数是初始化的值，用于指定操作符在遇到第一个值之前使用的初始值。我们将初始值设置为 0，因此操作符输出的第一个值是 0，第二个值是 1，第三个值是前两个值之和（即 3），以此类推。
用法
scan 操作符在 RxJS 中的用法也很简单。只需要传递一个函数作为参数即可。这个函数将执行一些运算，然后将结果发送到订阅者。操作符的语法如下：
----------------------------- ------
其中，accumulator 是一个函数，它接收两个参数：先前累积的值和当前流中的值，并返回一个新的累积值。seed 为可选的，如果指定了，则作为第一个反转之前的累积值。
示例
基本示例
让我们从一个简单的例子开始。假设我们有一个从服务器接收消息的流，并且我们要计算收到的消息的总数。这里我们可以使用 scan 来完成这项任务：
----- - ---- - - ----- ----- - ---- - - --------------- ----- -------- - - - --- -- -------- --------- ---- ----- -- - --- -- -------- --------- ---- ----- -- - --- -- -------- --------- ---- ------ - -- -------------------- ---------- -------- -- --- - -- -- ----------------- -- ---------------- ----- ----- -- ------------
上面的代码中，我们首先定义了一个包含三个对象的 messages 数组，它们各自具有一个 id 和 message 属性。然后我们通过 observable.from(messages) 创建了一个 observables 流，然后将该流传递给 scan 操作符，该操作符的第一个参数是每个消息的处理函数，第二个参数是初始值。在本例中，我们只是对每个消息执行一个计数器运算，因此我们可以将初始值设置为 0。
输出结果：
--- ----- ----- -- - --- ----- ----- -- - --- ----- ----- -- -
可以看到，我们使用 scan 操作符来计算了消息的总数，并实时更新了结果。
计算成功的请求总数
假设我们在一个Web页面上提交API请求，然后在结果成功返回后，我们想要计算成功请求的总数。在这种情况下，我们可以使用 scan 操作符来实现此功能。以下是一个示例代码：
----- - ---- - - -----
----- - ---- --------- ---- ------- ---- - - ---------------
----- ------ - ------------
----- ------------ - ----------------------------------
----- -------- - ----------------------- ---------
----- ----------- - --------------
----- -- --------------------- --------------------
------------ -- ---------------
------ -- ---------------- ------- ------------ -------------
---
------------- -- --------------- --- -----
--
----- -------------------- - -----------------
---------- ---- -- --- - -- --
--
------------------------------------ -- ---------------- ----- ------- ------- ----- -- ------------上面的代码中，我们首先定义了 apiUrl，然后从 Web 页面的 submit 按钮的 click 事件创建了 clicked$ 流。然后，我们从 clicked$ 中使用 map 运算符创建了一个新的流，该流使用当前时间戳构建一个 API 请求的完整 URL。接下来，我们使用 mergeMap 运算符发送 API 请求。
我们使用 tap 运算符来观察 API 请求是否成功，只有当响应结果为 true 时，我们才将结果过滤，并将结果传递给 scan 操作符，以求得成功请求的总数。
在本例中，我们使用 scan 操作符传递两个参数：一个用于迭代累加器的函数和一个用于指定初始值的参数。每当请求成功后，我们将计算新的总数并使用 subscribe 输出计数器的值。
记录聚合历史
除了聚合值之外，scan 还可以用于记录流史记录。例如，假设我们有一个函数，用于将输入字符串中的大写字母改为小写。现在，我们需要跟踪输入字符串和变换字符串的历史记录以进行调试。以下是一个示例代码：
----- - --------- - - -----
----- - ---- ---- - - ---------------
----- ----- - ---------------------------------
---------------- --------------
----- -- ----------------
---------- ------ -- --
-------- --------------------
-------- ---------------------------------------
--- - -------- --- -------- -- --
----------------- -- --------------------上面的代码中，我们首先从 Web 页面的 input 元素的 keyup 事件创建了一个流。然后，我们使用 map 运算符从输入事件中提取输入值。接下来，我们使用 scan 运算符来记录输入字符串和变换字符串的历史记录。在每次执行时，我们将使用一个包含当前输入和历史记录的对象更新状态，该对象存储在累加器中。通过使用 { current:'',history:[] } 作为累加器的初始值，我们保证了我们的操作符可以开始工作。
在接下来的 subscribe 函数中，我们简单地输出值，这里是一个包含 current 字符串和 history 数组的对象。
结论
在本文中，我们深入探讨了 RxJS 的 scan 操作符并提供了多个示例。我们学习了该操作符的执行方式、用法和示例等。现在，您应该理解如何使用 scan 进行数据处理和聚合，并且可以构建具有更高级特性的流处理程序。
在实践中，RxJS 的 scan 操作符是十分强大的，并且可以用于许多实际的应用场景。希望本文能够对读者有所帮助，并促进您的下一个流处理项目的成功实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670e4a165f551281026062ba