RxJS按Key分组：如何简洁合并同时间戳的数据流对象？

当然有更顺手的方案！你不用绕弯子先把整个数据流转成数组再处理，RxJS本身就有专门的操作符组合来搞定这种按字段分组合并的需求：

核心思路 #

1. 按time分组：用groupBy操作符把数据流中所有time相同的对象分到同一个分组Observable里
2. 合并分组内的对象：对每个分组用reduce将同组的对象属性合并成一个完整对象
3. 合并分组结果：用mergeMap把所有分组的合并结果放回主数据流，最后用toArray收集成目标数组

完整代码示例 #

import { Observable } from 'rxjs';
import { groupBy, mergeMap, reduce, toArray } from 'rxjs/operators';

// 你的原始数据流
const source$ = Observable.of( 
  {time: 1000, a: 100}, 
  {time: 1000, b: 100}, 
  {time: 2000, a: 200}
);

// 处理后的结果数据流
const mergedResult$ = source$.pipe(
  // 按time字段分组，每个分组的key就是对应的time值
  groupBy(item => item.time),
  // 遍历每个分组，合并组内的所有对象
  mergeMap(group => 
    group.pipe(
      // 初始值用分组的key作为time，然后逐个合并后续对象的属性
      reduce((accumulator, current) => ({ ...accumulator, ...current }), { time: group.key })
    )
  ),
  // 将所有合并后的对象收集为一个数组
  toArray()
);

// 订阅输出结果
mergedResult$.subscribe(result => {
  console.log(result);
  // 输出：[{time: 1000, a: 100, b: 100}, {time: 2000, a: 200}]
});

为什么这个方案更合适？ #

• 流式处理：如果你的数据流是异步产生的（比如实时推送、分页加载），这个方案可以边接收数据边处理，不用等所有数据都加载完成再操作，性能更优
• 代码更直观：操作符的组合完全对应你的业务逻辑（分组→合并→收集），可读性比先转数组再用map+reduce再拆分高很多
• 灵活性强：如果后续需要对分组做其他处理（比如过滤某个time值），直接在groupBy之后加操作符即可，扩展性好

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