如何利用数组合并算法解决前端大规模分页数据的去重拼接-js教程-PHP中文网

优先采用服务端游标分页，前端仅追加数据；次选Map增量合并，用id缓存去重；最后才用全量保序去重。核心是去重越靠近数据源头效率越高。

如何利用数组合并算法解决前端大规模分页数据的去重拼接

处理前端大规模分页数据时，常遇到重复项问题——比如用户下拉刷新、搜索重试或滚动加载，导致同一数据在不同页中多次出现。直接拼接会引入冗余，影响展示和统计。关键不是“先合并再去重”，而是“合并过程中精准识别并跳过已存在项”。下面几种实用策略，兼顾性能、可读性和兼容性。

按唯一标识（如 id）增量合并

适用于后端返回结构化数据（如 {id: 123, name: "张三", ...}），且每条记录有稳定主键：

用 Map 缓存已加载项的 id → item 映射，插入新页数据前逐条检查
避免遍历整个历史数组，时间复杂度从 O(n×m) 降至 O(m)，m 是当前页长度

示例：

const loadedMap = new Map(); // 全局缓存
function mergePage(newData) {
  const uniqueItems = [];
  for (const item of newData) {
    if (!loadedMap.has(item.id)) {
      loadedMap.set(item.id, item);
      uniqueItems.push(item);
    }
  }
  return uniqueItems;
}
// 调用：currentList.push(...mergePage(nextPageData));

服务端配合：传递 last_id 或 cursor

真正减少重复的根本解法是让后端支持游标分页（cursor-based pagination）：

前端不再依赖页码（page=2），而是传上一页最后一条的 id 或加密 cursor
后端保证“从该点之后取 N 条”，天然规避翻页重叠
前端无需去重逻辑，仅追加即可，内存与 CPU 开销最小
注意：需后端支持；若只提供 offset 分页，此法不可行

客户端智能合并（适合无主键或弱主键场景）

当数据无可靠 id（如纯文本列表、日志片段），可用组合字段生成临时指纹：

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

对关键字段（如 title + timestamp + content.slice(0,50)）做简单哈希（如 JSON.stringify 后取 slice(0,32)）作为 key
仍用 Map 缓存指纹，避免深比较
慎用于长文本或高频更新场景，哈希碰撞风险需结合业务容忍度评估

批量去重 + 保序合并（兼容老环境）

若必须使用传统分页（offset）且无法改服务端，又需兼容 IE11 等旧浏览器：

将所有分页数据暂存为扁平数组，用 reduce + findIndex 保序去重
不推荐直接 Set，因对象引用不等价，且会丢失顺序

示例：

function mergeWithDedupe(allPages) {
  return allPages.flat().reduce((acc, cur) => {
    if (!acc.find(item => item.id === cur.id)) acc.push(cur);
    return acc;
  }, []);
}