[代码实现]S 中如何实现大对象深度对比
1.使用同一个链接，如何实现PC打开是web 应用、手机打开是一个H5应用2.如何保证用户的使用体验3.如何解决页面请求接口大规模并发问题4.设计一套全站请求耗时统计工具5.大文件上传6.h5如何解决移动端适配问题7.实现站点一键换肤功能实现方式有哪些8.如何实现网页加载进度条9.常见图片懒加载方式有哪些10.cookie构成部分有哪些11.DNS协议了解多少12.函数式编程了解多少13.一直在window上面挂东西是否有什么风险14.小程序为什么会有两个线程15.如何通过设置失效时间清除本地存储的数据?16.如果不使用脚手架，如果用webpack构建一个自己的react应用17.用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数18.package.json 里面 sideEffects 属性的作用19.script 标签上有那些属性20.SPA 中使用 hash 路由时作用和意义21.用户访问页面白屏了，原因是啥如何排查?
22.[代码实现]S 中如何实现大对象深度对比
23.JavaScript 中处理 100 万数据时确保性能和流畅度的几种方法24.<script> 标签放在 HTML 文档的 <body> 内底部25.虚拟滚动加加载的原理和实现思路26.ts二刷27.promise面试题28.命令行创建 uni-app 项目29.uniapp+v3的小知识点30.ts文件忽略校验31.['',''].join(" ").trim()32.自定义导航栏交互(导航栏左上角按钮+滚动动画效果)33.可视化点击x轴标签实现标签文字切换34.运行vue -V的时候vue : 无法加载文件 C:\Users\jiaho\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本35.uniapp+vue2实现下载相关36.深度响应式劫持vue3以下是在 JavaScript 中实现大对象深度对比的几种方法：
方法一：递归比较
function deepEqual(obj1, obj2) {
// 首先比较两个对象是否为同一引用
if (obj1 === obj2) {
return true;
}
// 检查是否都是对象且不为 null
if (typeof obj1!== 'object' || obj1 === null || typeof obj2!== 'object' || obj2 === null) {
return false;
}
// 获取对象的键列表
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
// 检查键的数量是否相同
if (keys1.length!== keys2.length) {
return false;
}
// 递归比较每个键对应的值
for (const key of keys1) {
if (!keys2.includes(key) ||!deepEqual(obj1[key], obj2[key])) {
return false;
}
}
return true;
}
// 示例使用
const objA = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
const objB = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
console.log(deepEqual(objA, objB)); // true
解释：
- 首先，检查两个对象是否为同一引用，如果是，则认为它们相等。
- 接着，检查对象是否为非对象或
null，如果是，则认为它们不相等。 - 然后，比较两个对象的键的数量，如果不同，它们不相等。
- 最后，递归比较每个键对应的值，如果有一个键的值不相等，它们不相等。
方法二：使用 JSON 序列化
function deepEqualWithJSON(obj1, obj2) {
const str1 = JSON.stringify(obj1);
const str2 = JSON.stringify(obj2);
return str1 === str2;
}
// 示例使用
const objA = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
const objB = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
console.log(deepEqualWithJSON(objA, objB)); // true
解释：
- 将两个对象序列化为 JSON 字符串。
- 比较两个 JSON 字符串是否相等。
- 这种方法的缺点是无法处理函数、
undefined、Symbol等特殊值，因为JSON.stringify会将它们转换为null或忽略。
方法三：使用 Lodash 库
首先，你需要安装 Lodash 库：
npm install lodash
然后使用 Lodash 的 isEqual 方法：
const _ = require('lodash');
const objA = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
const objB = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
console.log(_.isEqual(objA, objB)); // true
解释：
- Lodash 的
isEqual方法是一个功能强大的工具，可以深度比较两个对象，包括对象的属性和嵌套对象、数组、函数等。 - 它可以处理
undefined、Symbol、函数等特殊值，并且可以处理对象的循环引用。
方法四：使用递归和 Object.entries
function deepEqualWithEntries(obj1, obj2) {
// 首先比较两个对象是否为同一引用
if (obj1 === obj2) {
return true;
}
// 检查是否都是对象且不为 null
if (typeof obj1!== 'object' || obj1 === null || typeof obj2!== 'object' || obj2 === null) {
return false;
}
// 获取对象的键值对列表
const entries1 = Object.entries(obj1);
const entries2 = Object.entries(obj2);
// 检查键值对的数量是否相同
if (entries1.length!== entries2.length) {
return false;
}
// 递归比较每个键值对
for (const [key, value] of entries1) {
if (!Object.hasOwnProperty.call(obj2, key) ||!deepEqualWithEntries(value, obj2[key])) {
return false;
}
}
return true;
}
// 示例使用
const objA = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
const objB = {
a: 1,
b: {
c: 2,
d: [3, 4]
}
};
console.log(deepEqualWithEntries(objA, objB)); // true
解释：
- 类似于第一种方法，但使用
Object.entries来获取对象的键值对列表，方便比较。 - 对于每个键值对，递归比较其值是否相等。
总结
- 方法一：适合大多数情况，代码简单，易于理解，但对于循环引用会导致栈溢出。
- 方法二：简单快速，但无法处理
undefined、Symbol、函数等特殊值。 - 方法三：功能强大，适用于各种复杂情况，但需要引入外部库。
- 方法四：是方法一的变种，使用
Object.entries代替Object.keys，提供了一种不同的实现方式。
根据你的具体需求，可以选择最适合的方法进行大对象的深度比较。如果你需要处理复杂的对象，包括特殊值和循环引用，推荐使用 Lodash 的 isEqual 方法。
本文来自博客园，作者：jialiangzai，转载请注明原文链接：https://www.cnblogs.com/zsnhweb/p/18646199
合集:
前端小知识点
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通