NextJS+Zustand中高效深度对比数组并合并唯一对象的最优方案

场景描述 #

我正在使用NextJS搭配Zustand，Zustand状态中存储的对象数组为：

[{a:1, b:2}, {a:2, b:3}]

现有一个传入的对象数组，包含原有对象及唯一新增对象，但顺序与原数组不同：

[{a:2, b:3}, {a:4, b:5}, {a:1, b:2}]

需求是将唯一的新对象追加到原数组末尾，疑问在于：使用for循环或.every()遍历新数组去重并追加是否是最快的方式？担心这两种方法资源消耗较高。

高效实现方案 #

直接用for循环或.every()确实存在重复遍历的性能损耗（比如.every()需遍历原数组每一项判断存在性），数组元素越多，资源消耗越明显。推荐用**哈希表（Map）**优化，将整体时间复杂度从O(n²)降到O(n)：

步骤1：缓存原数组的唯一标识 #

假设对象的a字段是唯一标识（可根据实际业务调整），先将原数组的标识存入Map：

const existingIds = new Map(state.map(item => [item.a, true]))

步骤2：筛选新数组中的新增项 #

遍历传入的新数组，快速筛选出原数组中没有的项（题目说明只有一个新增项，实际只会得到单个元素的数组）：

const newItems = incomingArray.filter(item => !existingIds.has(item.a))

步骤3：更新Zustand状态 #

遵循Zustand的不可变更新原则，将新增项追加到原数组末尾：

setState(prev => [...prev, ...newItems])

优势说明 #

• Map的has操作是O(1)时间复杂度，相比.every()的O(n)判断，能大幅减少遍历次数，性能提升显著。
• 仅需两次线性遍历（一次生成Map，一次筛选新数组），资源消耗远低于嵌套遍历的实现方式。

注意事项 #

• 如果没有单一字段作为唯一标识，可使用组合字段（如${item.a}-${item.b}）生成唯一键；尽量避免用JSON.stringify(item)，该方法性能略差且可能因对象属性顺序问题导致判断错误。
• 必须通过扩展运算符生成新数组更新状态，不能直接修改原数组，否则Zustand无法检测到状态变化。

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