TypeScript中scan算子函数式累加器的工作原理及返回值问询

云原生阿岚

2026-5-28

嘿，刚接触TypeScript和RxJS的scan算子对吧？别慌，我一步步给你掰明白这段代码的逻辑～

理解你的scan算子逻辑

首先先快速扫一下scan的核心作用：它会持续维护一个叫“累加器（acc）”的状态，每收到数据流里的一个新值，就用你写的累加器函数去更新这个状态，同时把更新后的状态输出出来。

先拆解你的代码参数

先把你写的scan调用拆开来看看：

.scan(function (acc: Message[], x: (msg: Message[]) => Message[]) { 
  return x(acc); 
}, initialMessages)

这里有两个关键部分：

第二个参数initialMessages：这是累加器的初始值，类型是Message[]，也就是说一开始acc就等于这个初始数组。
第一个参数是你的累加器函数，它接收两个参数：
- acc: 当前的累加器状态，类型是Message[]
- x: 划重点！这不是普通的数据项，而是一个函数！它的类型(msg: Message[]) => Message[]意思是：接收一个Message数组，返回一个新的Message数组。

一句话说透：它返回的是把当前的累加器acc传入x函数后，x执行完得到的结果。

举个具体的例子帮你理解：假设x是这样一个函数：

const addNewMessage = (currentMsgs: Message[]) => {
  // 复制原数组，再追加一条新消息
  return [...currentMsgs, { id: 3, content: '这是新消息' } as Message];
}

那当你执行x(acc)的时候，就是把当前的acc（比如初始的[msg1, msg2]）传入这个函数，函数会返回[msg1, msg2, msg3]——这就是return x(acc)的返回值。

通常我们用scan的时候，x是数据流里的普通数据（比如一条单独的Message），然后累加器函数把x加到acc里。但你的情况很特别——x本身是个操作函数，所以整个流程是这样的：

初始化阶段：acc被设置为initialMessages，scan会先输出这个初始值。
当数据流传来第一个x（也就是一个操作函数）：
- 把当前的acc作为参数传给x函数
- x函数对acc做你定义好的操作（比如加元素、删元素、修改元素），返回一个新的Message数组
- 这个新数组会变成下一次迭代时的acc，同时scan会把它输出出去
后续每收到一个新的x函数，就重复步骤2，每次都基于当前的acc生成新的状态。

再给你走一遍完整的流程例子：

初始acc = [{id:1, content:"第一条"}, {id:2, content:"第二条"}]（initialMessages）
第一个x函数是“添加第三条消息”：x(acc)返回[{id:1,...}, {id:2,...}, {id:3,...}] → 新acc变成这个数组，scan输出它
第二个x函数是“删除第一条消息”：x(acc)返回[{id:2,...}, {id:3,...}] → 新acc更新，scan输出它
第三个x函数是“清空数组”：x(acc)返回[] → 新acc变成空数组，scan输出它

这种写法其实是把对累加器的操作逻辑抽成了独立的函数，让数据流里传递的不是数据，而是“操作指令”。好处是超级灵活——你可以随时通过不同的x函数来改变acc的更新规则，不用去修改scan本身的累加器函数。

内容的提问来源于stack exchange，提问作者ayadev