标题：深度比较嵌套对象并精准提取差异键的 JavaScript 实战教程

本文详解如何正确比较具有嵌套数组和对象的 json 数据，避免因引用相等性导致的误判，提供可复用的深度差异检测函数及生产级注意事项。

在 javaScript 中，直接使用 === 或 == 比较对象或数组时，实际比较的是内存引用地址，而非结构与值是否一致。这意味着即使两个对象内容完全相同，只要它们是不同实例（例如两次 jsON.parse()、或两次字面量声明），比较结果仍为 false。这正是原问题中 imagens 和 lotes 被错误识别为“不同”的根本原因——它们是数组（引用类型），而原始函数未做深层值比对。

要实现按值比对（value-based comparison），必须递归或分层检查嵌套结构。以下是一个轻量、专注、可扩展的解决方案，特别针对含对象数组的场景：

✅ 核心思路

• 对基础类型（字符串、数字、布尔、NULL）直接使用 ===；
• 对数组：先校验长度与类型，再逐项比对每个元素（若元素为对象，则递归比对其属性）；
• 对普通对象（非数组）：本例暂不涉及深层嵌套对象比对，但已预留扩展接口；
• 其他引用类型（如 date、map、Set）需按需补充逻辑（后文说明）。

? 关键工具函数：isObjArrayValueEqual

function isObjArrayValueEqual(arr1, arr2) {   if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;   if (arr1.length !== arr2.length) return false;    for (let i = 0; i < arr1.length; i++) {     const a = arr1[i];     const b = arr2[i];      // 仅支持对象类型元素（忽略 null/undefined/原始值）     if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {       return false;     }      const keysA = Object.keys(a);     const keysB = Object.keys(b);     if (keysA.length !== keysB.length) return false;      for (const key of keysA) {       if (!(key in b) || a[key] !== b[key]) return false;     }   }   return true; }

⚠️ 注意：此函数假设数组内所有元素均为扁平对象（无嵌套对象或数组）。若需支持任意深度嵌套，请升级为完整深比较（如 _.isEqual 或 fast-deep-equal）。

? 改进后的差异提取函数：getDiffKeys

const getDiffKeys = (newObj, oldObj) => {   // 空旧对象 → 全量更新   if (Object.keys(oldObj).length === 0 && Object.keys(newObj).length > 0) {     return Object.keys(newObj);   }    const diffKeys = [];    for (const key in oldObj) {     // 跳过原型链属性     if (!oldObj.hasOwnProperty(key)) continue;      const newVal = newObj[key];     const oldVal = oldObj[key];      // 值未变更 → 跳过     if (newVal === oldVal) continue;      // 数组：走自定义值比对     if (Array.isArray(newVal) && Array.isArray(oldVal)) {       if (!isObjArrayValueEqual(newVal, oldVal)) {         diffKeys.push(key);       }       continue;     }      // 其他类型（含 null、undefined、对象、日期等）默认按引用判断     // 若需更精确（如 Date 比对时间戳），此处可扩展     diffKeys.push(key);   }    return diffKeys; };

✅ 使用示例

const objA = { /* 原始对象 */ }; const objB = { ...objA, imagens: [{ extension: "jpeg", url: "...", extra: "field" }] };  console.log(getDiffKeys(objA, objB));  // → ["imagens"] （正确识别新增字段）  console.log(getDiffKeys(objA, objA));  // → [] （相同对象返回空数组，无误报）

? 重要注意事项

• 性能权衡：深度比较必然带来开销。高频调用场景建议加缓存（如 json.stringify 哈希预计算）或采用不可变数据结构（如 Immutable.js）。
• 边界情况处理：
  • null 与 undefined：null === undefined 为 false，符合预期；
  • NaN：NaN !== NaN，需单独处理（本例未覆盖，生产环境建议用 number.isNaN() 判断）；
  • Date / regexp：应转换为字符串或原始值再比对（例如 date.getTime()）。
• 推荐生产方案：对于复杂需求，优先选用成熟库：

  npm install fast-deep-equal

  import equal from 'fast-deep-equal'; if (!equal(oldObj[key], newObj[key])) diffKeys.push(key);

✅ 总结

精准提取对象差异键的关键，在于区分引用相等与值相等。本文提供的 isObjArrayValueEqual + getDiffKeys 组合，以最小侵入方式解决了嵌套数组的误判问题，兼顾可读性与实用性。开发者可根据业务复杂度，选择轻量自实现或引入专业深比较库，确保数据同步、表单校验、状态更新等场景的可靠性与可维护性。