本文介绍如何将按时间排序的聊天消息数组，依据连续的 userId 变化自动切分为多个逻辑会话块（即同一用户连续发送的消息归为一组），适用于前端消息渲染、对话气泡分组等场景。
本文介绍如何将按时间排序的聊天消息数组，依据连续的 `userid` 变化自动切分为多个逻辑会话块（即同一用户连续发送的消息归为一组），适用于前端消息渲染、对话气泡分组等场景。
在构建聊天界面时，单纯按 userId 分组（如 groupBy userId）会导致所有同用户消息合并为单一大组，无法体现“用户A连发3条→用户B连发2条→用户A再发2条”这样的真实对话节奏。正确做法是：先确保消息按时间升序排列，再将连续相同 userId 的相邻消息聚合成一个子数组——这本质上是一种“连续值分组”（run-length grouping），而非传统哈希分组。
实现该逻辑最简洁高效的方式是使用 JavaScript 原生的 Array.prototype.reduce()。其核心思想是：遍历已排序的消息数组，比较当前项与前一项的 userId。若不同（或为首项），则开启新分组；否则追加到上一个分组末尾。
以下是完整可运行的实现代码：
// 示例数据（注意：实际项目中 timestamp 应为 Date 实例，非 ISODate 伪对象）
const messages = [
{ content: 'content 1', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T19:57:42.124Z') },
{ content: 'content 2', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T19:58:42.124Z') },
{ content: 'content 3', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T19:59:42.124Z') },
{ content: 'content 4', userId: '345', targetUserId: '123', timestamp: new Date('2023-11-06T20:00:42.124Z') },
{ content: 'content 5', userId: '345', targetUserId: '123', timestamp: new Date('2023-11-06T20:01:42.124Z') },
{ content: 'content 6', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T20:02:42.124Z') },
{ content: 'content 7', userId: '123', targetUserId: '345', timestamp: new Date('2023-11-06T20:03:42.124Z') }
];
// ✅ 关键步骤：确保数据已按 timestamp 升序排序（服务端或客户端执行）
// const sortedMessages = messages.sort((a, b) => a.timestamp - b.timestamp);
// 执行连续 userId 分组
const groupedChats = messages.reduce((groups, current, index, array) => {
if (index === 0 || current.userId !== array[index - 1].userId) {
groups.push([current]); // 新建分组
} else {
groups[groups.length - 1].push(current); // 追加至当前分组
}
return groups;
}, []);
console.log(groupedChats);
// 输出：3 个子数组，分别对应用户 '123'、'345'、'123' 的连续发言块⚠️ 重要注意事项：
-
排序前置不可省略：
reduce分组依赖消息严格按时间顺序排列。务必在分组前调用.sort((a, b) => a.timestamp - b.timestamp)，否则逻辑失效； - 区分“连续分组”与“去重分组”：本方案识别的是 相邻相同 userId，而非全局唯一 userId —— 这正是聊天场景所需的语义；
-
性能友好：
reduce时间复杂度为 O(n)，无嵌套循环，适合万级以内消息量； -
扩展建议：如需支持多端同步或离线缓存，可在分组后为每个块添加
blockId或createdAt（取首条消息时间戳）便于状态管理。
此方法轻量、标准、无依赖，可直接集成至 React/Vue 等框架的 useMemo 或 computed 中，作为消息列表渲染前的预处理步骤，让 UI 层专注样式与交互，而非数据形态转换。
