讲师中心 微信公众号

工具推荐

视频效率加速
立刻MV
立刻MV

低成本歌曲 MV、视频生成

AniShort
AniShort

AI短剧协同制作平台

剧云
剧云

中文短剧剧本制作平台

Laper
Laper

剧本策划到成片协作

JavaScript 深层对象差异检测:精准提取键值变更的实用教程

酷静姑娘_4046

酷静姑娘_4046

发布时间:2026-01-27 17:55:01

|

307人浏览过

|

来源于php中文网

原创

javascript 深层对象差异检测:精准提取键值变更的实用教程 - php中文网

本文详解如何正确比较含嵌套数组/对象的 JavaScript 数据结构,避免因引用相等性导致的误判,提供可复用的深度值比较函数与差异提取逻辑。

在 JavaScript 中,直接使用 === 或 == 比较对象或数组时,实际比对的是内存引用地址,而非内容本身。这意味着即使两个数组结构完全一致(如 [{a: 1}] 和 [{a: 1}]),只要它们是不同实例,比较结果即为 false。这正是原问题中 imagens 和 lotes 被错误标记为“不同”的根本原因——它们是引用类型,而原始函数未做深层值比较。

要精准识别真实的数据变更,必须实现按值比较(value-based comparison),尤其针对嵌套的数组与对象。以下是一个生产就绪的解决方案,包含两个核心部分:

  1. isObjArrayValueEqual:专用于比较元素全为普通对象的数组(支持多层级嵌套对象,但本例暂不递归处理嵌套对象内的嵌套对象;如需完整深比较,建议引入 lodash.isEqual 或自行扩展递归逻辑);
  2. 增强版 getNew:在键级差异检测中,对数组字段调用上述函数,其余类型仍使用严格相等判断。
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 obj1 = arr1[i];
    const obj2 = arr2[i];

    // 确保两者均为非 null 对象
    if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
      return false;
    }

    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);
    if (keys1.length !== keys2.length) return false;

    // 逐属性比对(仅支持一层对象;若需深度嵌套,请递归调用 isEqual)
    for (const key of keys1) {
      if (obj1[key] !== obj2[key]) return false;
    }
  }
  return true;
}

const getNew = (newObj, oldObj) => {
  // 边界处理:oldObj 为空时直接返回 newObj
  if (Object.keys(oldObj).length === 0 && Object.keys(newObj).length > 0) {
    return newObj;
  }

  const diff = {};
  for (const key in oldObj) {
    // 仅当 newObj 存在该 key 且值不等时进入判断
    if (!(key in newObj)) continue;

    if (oldObj[key] !== newObj[key]) {
      // 对数组类型启用值比较
      if (Array.isArray(oldObj[key]) && Array.isArray(newObj[key])) {
        if (!isObjArrayValueEqual(newObj[key], oldObj[key])) {
          diff[key] = newObj[key];
        }
      } else {
        // 基本类型、null、Date、RegExp 等需额外处理;此处默认按值比较(注意:Date 需用 getTime())
        diff[key] = newObj[key];
      }
    }
  }

  return diff; // 统一返回 diff 对象(空对象表示无差异)
};

✅ 使用示例:  

Java调试
Java调试

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

下载

立即学习“Java免费学习笔记(深入)”;

const objA = { 
  nome: "Lotes", 
  lotes: [{ lote: "LOte0", loteQtd: "8" }] 
};

const objB = { 
  nome: "Lotes", 
  lotes: [{ lote: "LOte0", loteQtd: "8" }] 
};

console.log(getNew(objA, objB)); // → {}(无差异)

const objC = { 
  nome: "Lotes", 
  lotes: [{ lote: "LOte0", loteQtd: "9" }] 
};

console.log(getNew(objA, objC)); // → { lotes: [...] }

⚠️ 注意事项:  

  • 当前 isObjArrayValueEqual 仅支持数组内纯对象(不含函数、undefined、NaN、Symbol、Date、正则等特殊值)。若数据含这些类型,需扩展比较逻辑(例如:Date 用 getTime(),NaN 用 Number.isNaN() 判断)。
  • 如需完整深比较(包括对象内嵌套对象、Set/Map 等),强烈推荐使用成熟库:  
    npm install lodash.isequal
    import isEqual from 'lodash.isequal';
    // 替换 isObjArrayValueEqual 判定为:isEqual(newObj[key], oldObj[key])
  • 原始函数末尾 return oldObj 易引发歧义(应返回 diff 或 null),已统一改为返回 diff(空对象即无变化),符合“差异即变更”的语义直觉。

掌握引用与值的差异本质,并辅以针对性的比较策略,才能构建出鲁棒的对象差异分析工具——这是状态管理、表单脏检查、API 增量更新等场景的关键基础能力。

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

讯飞智文

一款面向学习和办公场景的AI文档创作工具,可辅助生成PPT与Word文档,提高资料整理和内容制作效率。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

549

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1698

2024.03.01

treenode的用法
treenode的用法

​在计算机编程领域,TreeNode是一种常见的数据结构,通常用于构建树形结构。在不同的编程语言中,TreeNode可能有不同的实现方式和用法,通常用于表示树的节点信息。更多关于treenode相关问题详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2841

2023.12.01

C++ 高效算法与数据结构
C++ 高效算法与数据结构

本专题讲解 C++ 中常用算法与数据结构的实现与优化,涵盖排序算法(快速排序、归并排序)、查找算法、图算法、动态规划、贪心算法等,并结合实际案例分析如何选择最优算法来提高程序效率。通过深入理解数据结构(链表、树、堆、哈希表等),帮助开发者提升 在复杂应用中的算法设计与性能优化能力。

396

2025.12.22

深入理解算法:高效算法与数据结构专题
深入理解算法:高效算法与数据结构专题

本专题专注于算法与数据结构的核心概念,适合想深入理解并提升编程能力的开发者。专题内容包括常见数据结构的实现与应用,如数组、链表、栈、队列、哈希表、树、图等;以及高效的排序算法、搜索算法、动态规划等经典算法。通过详细的讲解与复杂度分析,帮助开发者不仅能熟练运用这些基础知识,还能在实际编程中优化性能,提高代码的执行效率。本专题适合准备面试的开发者,也适合希望提高算法思维的编程爱好者。

437

2026.01.06

C++ 数据结构与算法实现教程合集
C++ 数据结构与算法实现教程合集

以 C++ 为实现语言,系统讲解核心数据结构与算法,涵盖链表(单链表/双链表/环检测)、栈与队列(单调栈/优先队列)、二叉树(遍历/BST/AVL/红黑树)、哈希表(开地址法/链地址法)、图(邻接表/BFS/DFS/Dijkstra/拓扑排序)、常见排序算法(快排/归并/堆排/计数排序)的实现与复杂度分析,同时分享 LeetCode 刷题技巧、竞赛编程常用模板(二分/前缀和/滑动窗口/动态规划),帮助开发者夯实算法基础。

492

2026.05.09

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

710

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

343

2025.11.16

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

40

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn