RxJS中使用scan操作符如何返回插入项后的更新数组？

你写的RxJS实现存在两个核心问题：

• scan 没有显式设置初始值，且你合并的两个流发出值类型不统一：this.roles$ 发出的是完整角色数组，this.roleChanged$ 发出的是单个角色对象。scan 会将首次收到的值作为初始累加值，后续所有新值（包括this.roles$ 后续发出的新完整数组）都会被当作单个role参数处理，不会替换原有累加的数组，这就是你在scan内部拿不到最新角色数组的原因。
• 没有对merge流入的两类事件做区分，scan无法判断当前传入的是全量更新的数组还是单条更新的角色。

方案1：调整RxJS响应式实现（推荐） #

通过给不同流的事件打标记，在scan中区分事件类型分别处理：

public checkedRoles$ = merge(
  // 给全量角色更新事件打标记
  this.roles$.pipe(map(roles => ({ type: 'full', data: roles }))),
  // 给单个角色变更事件打标记
  this.roleChanged$.pipe(map(role => ({ type: 'single', data: role })))
).pipe(
  scan((roles: Role[], event) => {
    // 全量更新直接替换当前累加数组
    if (event.type === 'full') {
      return event.data;
    }
    // 单条更新仅修改对应角色
    return roles.map(r => r.roleId === event.data.roleId ? event.data : r);
  }, [] as Role[]), // 显式指定初始空数组
  map(roles => roles.filter(r => r.checked))
);

该方案保留了响应式编程的无副作用特性，不需要手动管理订阅，可维护性更高。

方案2：优化你的简易实现 #

你原有的简易实现存在直接修改原对象导致数据污染的问题，调整为不可变更新的版本如下：

private checkedRoles$ = new BehaviorSubject<Role[]>([]);
readonly roleChangeSubject = new Subject<Role>();
roleChanged$ = this.roleChangeSubject.asObservable();

// 同步全量角色更新
this.roles$.subscribe(fullRoles => {
  // 新全量列表同步已有的选中状态
  const newRoles = fullRoles.map(role => {
    const cached = this.checkedRoles$.value.find(r => r.roleId === role.roleId);
    return cached ? { ...role, checked: cached.checked } : { ...role, checked: false };
  });
  this.checkedRoles$.next(newRoles);
});

// 处理单条角色变更
this.roleChanged$.subscribe(changedRole => {
  const updatedRoles = this.checkedRoles$.value.map(role => 
    role.roleId === changedRole.roleId ? { ...role, checked: changedRole.checked } : role
  );
  this.checkedRoles$.next(updatedRoles);
});

注意不要直接修改数组内的对象属性，用展开语法生成新对象实现不可变更新，可避免很多意料之外的流触发、视图渲染异常问题。

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