【前端】聊天消息去重

在处理聊天消息时，去重是一个常见的问题，尤其是当消息从服务器推送时，可能会因为网络不稳定或其他原因导致重复消息。为了避免重复消息出现在聊天记录中，以下是几种常见的消息去重方法。

---

1. 基于 Array.prototype.some() 去重

使用 some() 方法来检查当前消息是否已经存在于聊天记录中，如果存在则不重复添加，否则将新消息加入。

chatMsgs: state.chatMsgs.some(msg => msg._id === chatMsg._id)
    ? state.chatMsgs // 消息已存在，不添加
    : [...state.chatMsgs, chatMsg]

优点：

• 简单易懂，通过遍历消息数组检查是否有重复。

缺点：

• 性能较差：每次添加消息时，都会遍历整个数组，时间复杂度是 O(n)，如果消息列表很长，性能可能较差。
• 仅适用于防止单条消息的重复，如果 state.chatMsgs 里已经存在重复的消息，这个方法不会去重。

---

2. 基于 Map 去重 (针对单条消息去重的另一种解法)

使用 Map 来确保每个消息的 _id 唯一，避免重复消息加入。 Map 会根据键值（此处是 _id）自动去重。

chatMsgs: Array.from(new Map([...state.chatMsgs, chatMsg].map(msg => [msg._id, msg])).values())

优点：

• 高效：Map 具有 O(1) 的查找和插入效率，可以避免遍历数组，提高性能。
• 去重：通过使用 Map，可以确保每条消息的 _id 唯一，从而避免重复消息的加入。

缺点：

• 代码稍微复杂，尤其是在处理大量消息时需要使用 Map 来确保每条消息的唯一性。

注意：

• 这两种方法（1 和 2） 都是在 单条消息去重 的场景下使用的，区别在于性能：
  • some() 遍历所有消息，适用于较小的消息列表。
  • Map 更高效，适用于消息数量较多的情况，能够在处理时避免性能瓶颈。

---

3. 使用 Array.from() 和 Map 合并去重 (适用于批量去重)

当服务器推送新的消息时，同时去重历史消息和新推送的消息，可以通过 Array.from() 和 Map 来去重整个数组。

chatMsgs: Array.from(new Map(chatMsgs.map((msg: ChatMsg) => [msg._id, msg])).values())

优点：

• 可以去重初始化的消息列表，保证 chatMsgs 中没有重复的消息。
• 可以同时对新推送的消息和历史消息进行去重。

缺点：

• 这种方式需要处理整个消息列表，对于频繁更新消息的场景，性能可能有一定影响。

适用场景：

• 当你需要去重整个消息列表时，尤其是处理从服务器推送的新消息和已有的历史消息合并时，这种方式很适合。

---

总结

1. 单条消息去重：

   • 使用 Array.prototype.some() 来判断消息是否已存在，适合简单场景。
   • 使用 Map 来去重消息，适合处理大量消息，性能更高。

2. 批量消息去重：

   • 使用 Map 和 Array.from() 去重整个消息列表，确保每条消息的 _id 唯一。适用于从服务器接收一批消息并去重，特别是历史消息和新消息合并的场景。

---

选择推荐

• 对于 消息数量较少 且 不频繁更新 的情况，可以使用 some() 进行去重，简单易懂。
• 对于 大量消息 或者 需要高性能去重 的情况，推荐使用 Map。
• 如果需要 去重整个消息列表（比如历史消息和新推送消息合并时），可以使用 Map 和 Array.from() 的方法。

---

原文地址：https://blog.csdn.net/YvetW/article/details/146385741

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！