JavaScript 中合并嵌套对象数组并按唯一键去重的完整教程-js教程-PHP中文网

JavaScript 中合并嵌套对象数组并按唯一键去重的完整教程

本文介绍如何将多层嵌套的数组（每个子数组包含对象）扁平化合并，并基于 Time 和 Element 组合键去重，最终按首次出现顺序分组为多个独立子数组。

本文介绍如何将多层嵌套的数组（每个子数组包含对象）扁平化合并，并基于 `time` 和 `element` 组合键去重，最终按首次出现顺序分组为多个独立子数组。

在实际开发中，我们常遇到类似这样的数据结构：一个外层数组包含多个内层数组，每个内层数组由若干具有相同字段（如 Time 和 Element）的对象组成。目标不是简单地展平所有对象，而是保留首次出现的 Element 分组逻辑——即所有 Element: 'Hi' 的对象归入第一个子数组，Element: 'Hello' 归入第二个，Element: 'Bye' 归入第三个，且同一 (Time, Element) 组合在整个结果中仅出现一次（以首次出现位置为准）。

关键难点在于：

❌ 不能直接 flat() 后去重，否则会打乱原始分组语义；
❌ 原始代码中误将外层数组项（即子数组）当作单个对象处理，导致 obj.Element 报错；
✅ 正确思路是：遍历每个子数组 → 对其内部对象逐个判断是否已存在 → 使用全局状态记录已见的 (Time, Element) 组合 → 过滤出首次出现的对象 → 最终保留非空子数组。

✅ 推荐方案：`map` + `filter` + `Set`（清晰高效）

const arrays = [
  [{ Time: 45, Element: 'Hi' }, { Time: 55, Element: 'Hi' }, { Time: 65, Element: 'Hi' }],
  [{ Time: 45, Element: 'Hi' }, { Time: 55, Element: 'Hi' }, { Time: 65, Element: 'Hi' }, 
   { Time: 25, Element: 'Hello' }, { Time: 35, Element: 'Hello' }, { Time: 20, Element: 'Hello' }],
  [{ Time: 45, Element: 'Hi' }, { Time: 55, Element: 'Hi' }, { Time: 65, Element: 'Hi' }, 
   { Time: 25, Element: 'Hello' }, { Time: 35, Element: 'Hello' }, { Time: 20, Element: 'Hello' }, 
   { Time: 100, Element: 'Bye' }]
];

// 全局唯一标识 Set：用 "Time$Element" 字符串避免对象引用比较问题
const seen = new Set();
const merged = arrays
  .map(subArray => 
    subArray.filter(obj => {
      const key = `${obj.Time}$${obj.Element}`;
      if (seen.has(key)) return false;
      seen.add(key);
      return true;
    })
  )
  .filter(subArray => subArray.length > 0); // 移除过滤后为空的子数组

console.log(merged);
// 输出：
// [
//   [{Time:45,Element:'Hi'}, {Time:55,Element:'Hi'}, {Time:65,Element:'Hi'}],
//   [{Time:25,Element:'Hello'}, {Time:35,Element:'Hello'}, {Time:20,Element:'Hello'}],
//   [{Time:100,Element:'Bye'}]
// ]

? 原理说明

seen 是一个 Set，用于跨子数组追踪已处理的 (Time, Element) 组合；
每次遇到新对象时，生成唯一字符串键（如 "45$Hi"），若未存在则加入 Set 并保留该对象；
map() 保证每个子数组独立过滤，filter() 清理空结果，语义明确、易于调试。

⚠️ 注意事项

键构造需防冲突：使用 $ 分隔符可避免 Time=12, Element='34' 与 Time=1, Element='234' 误判为相同（若用纯拼接如 1234）；更健壮方案可用 JSON.stringify({Time, Element})，但性能略低；
顺序敏感：本方法严格遵循“首次出现优先”，符合题目预期；若需按 Element 字典序分组，应先 flat() 再按 Element 分组去重；
不可变性：原数组未被修改，返回全新结构，适合函数式编程场景；
扩展性：如需基于其他字段（如 id 或 name）去重，只需调整 key 生成逻辑即可。

? 进阶提示：单次 `reduce` 版（节省一次遍历）

若追求极致性能（尤其数据量极大时），可用 reduce 替代 map + filter：

Java调试

通过 JDWP 实现 Java 远程调试：连接远程 JVM、设置断点、单步执行代码、查看变量值、获取调用栈。适用于需要调试远程 Java 应用、排查运行时状态、追踪代码执行流程的场景。术语注解 JDWP：Java Debug Wire Protocol，Java 调试有线协议（Java 远程调试底层通信协议） remote JVM：远程 Java 虚拟机 step through code：代码单步调试（步入 / 步过 / 步出调试） inspect variables：变量查看 / 变量检视 stac

下载

const mergedReduce = arrays.reduce((acc, subArray) => {
  const filtered = subArray.filter(obj => {
    const key = `${obj.Time}$${obj.Element}`;
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
  if (filtered.length > 0) acc.push(filtered);
  return acc;
}, []);

两种写法结果完全一致，推荐初学者使用 map + filter 版——逻辑分离、可读性强；熟悉后可根据场景选择优化版本。

掌握此模式后，你可轻松应对日志聚合、多源 API 数据去重、前端缓存合并等真实业务需求。