前端js对象判等的最佳方式

前端在日常开发中，我们经常会遇到这样的场景：

需要判断两个对象是否“相等”。比如接口返回的数据有没有变化、表单值和初始值是否一致、缓存是否更新……

问题来了，==或===能解决吗？

答案是：不行。

看个例子：

const obj1 = { name: 'Tom' };
const obj2 = { name: 'Tom' };

console.log(obj1 === obj2); // false

为什么？

因为===比较的是引用地址，两个对象内容一样，但存在不同的内存地址，所以结果是 false。

那该怎么办？

常见的“笨方法”

很多人会直接想到一个办法：

JSON.stringify(obj1) === JSON.stringify(obj2);

原理：把对象转换成字符串再比较。
看起来挺香，但其实有两个坑：

1. 属性顺序不同会比较失败

   const a = { x: 1, y: 2 };
   const b = { y: 2, x: 1 };
   
   console.log(JSON.stringify(a) === JSON.stringify(b)); // false

2. 会忽略一些特殊值（如 undefined、Symbol、函数）。

所以，这个方法只能用在简单场景，不是最优。

最优方式：深度比较

要真正判断对象是否相等，就要递归地比较每个属性。
核心逻辑：

• 如果不是对象，直接===比较。
• 如果是对象，比较键数量和每个键的值。>

代码示例：

function isEqual(obj1, obj2) {
if (obj1 === obj2) returntrue; // 同一引用或原始值相等

if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 == null || obj2 == null) {
    returnfalse; // 其中一个不是对象
  }

const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);

if (keys1.length !== keys2.length) returnfalse;

for (let key of keys1) {
    if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key])) {
      returnfalse;
    }
  }

returntrue;
}

测试一下：

console.log(isEqual({ a: 1, b: { c: 2 } }, { a: 1, b: { c: 2 } })); // true
console.log(isEqual({ a: 1 }, { a: 1, b: 2 })); // false

这才是真正的“内容相等”。

有没有更偷懒的方法？

如果你在项目中已经用了 Lodash，可以直接用它的 _.isEqual()，稳定高效，边界情况都帮你处理好了：

import { isEqual } from 'lodash';

console.log(isEqual(obj1, obj2));

总结

• ===比较的是引用，不适合对象内容比较。
• JSON.stringify 只适合简单对象，不是万能解。
• 最优解：递归比较，或者直接用 Lodash.isEqual。

所以，下次判断对象是否相等，不要再被 === 迷惑啦！

以上关于前端js对象判等的最佳方式的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。