判断两个JS对象是否深度相等,需采用特定方法处理内部属性和复杂类型。1. json.stringify()转换比较适用于简单对象,但无法处理循环引用、属性顺序敏感且对undefined、date、regexp等特殊类型处理存在缺陷;2. 递归深度比较可应对属性顺序不一致和特殊类型(如date、regexp),理论上支持循环引用(需额外处理),但代码较复杂且性能较差;3. lodash的_.isequal()功能全面,能处理各种特殊情况包括循环引用,性能优化良好,但需引入库文件。直接使用==或===仅比较对象引用,不适用内容比较。选择方案应根据对象结构、性能需求及特殊类型处理要求综合决定。
判断两个JS对象是否相等,不仅仅是简单的==或===,深度比较需要考虑对象内部的属性是否一致。接下来,我会介绍几种实用的深度比较方法,帮你解决这个问题。
解决方案
-
JSON.stringify() 转换后比较
这是最简单粗暴的方法。先将两个对象用JSON.stringify()转换为字符串,然后直接比较字符串是否相等。
function isEqual(obj1, obj2) { return JSON.stringify(obj1) === JSON.stringify(obj2); } const objA = { a: 1, b: { c: 2 } }; const objB = { a: 1, b: { c: 2 } }; const objC = { a: 1, b: { c: 3 } }; console.log(isEqual(objA, objB)); // true console.log(isEqual(objA, objC)); // false
优点: 简单易懂,代码量少。
缺点:
- 无法处理循环引用对象。
- 属性顺序敏感,即{a: 1, b: 2}和{b: 2, a: 1}会被判定为不相等。
- 对于undefined、Date、RegExp等特殊类型的处理可能存在问题。例如,undefined属性会丢失,Date对象会被转换为字符串。
-
递归深度比较
这是一种更严谨的方法,可以处理属性顺序不一致和循环引用的情况。
function deepEqual(obj1, obj2) { if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) { return obj1 === obj2; // 基本类型直接比较 } const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) { return false; // 属性数量不一致 } for (let key of keys1) { if (!obj2.hasOwnProperty(key) || !deepEqual(obj1[key], obj2[key])) { return false; // 属性值不相等 } } return true; } const objA = { a: 1, b: { c: 2 } }; const objB = { b: { c: 2 }, a: 1 }; // 属性顺序不同 const objC = { a: 1, b: { c: 3 } }; console.log(deepEqual(objA, objB)); // true console.log(deepEqual(objA, objC)); // false // 处理Date类型 const date1 = new Date('2023-10-26'); const date2 = new Date('2023-10-26'); console.log(deepEqual(date1, date2)); // true // 处理RegExp类型 const reg1 = /abc/i; const reg2 = /abc/i; console.log(deepEqual(reg1, reg2)); // true // 处理循环引用(简单示例,更复杂的循环引用需要更复杂的处理) const objD = {}; objD.a = objD; const objE = {}; objE.a = objE; //console.log(deepEqual(objD, objE)); // 栈溢出,需要特殊处理循环引用
优点:
- 可以处理属性顺序不一致的情况。
- 可以处理Date和RegExp等特殊类型。
- 理论上可以处理循环引用(需要额外处理,上面的代码会栈溢出)。
缺点:
- 代码相对复杂。
- 性能相对较差,尤其是对于大型对象。
- 需要额外处理循环引用,否则可能导致栈溢出。
-
使用 Lodash 的 _.isEqual() 方法
Lodash 是一个流行的 JavaScript 工具库,提供了很多实用的函数,包括深度比较对象的_.isEqual()方法。
const _ = require('lodash'); // 需要安装lodash: npm install lodash const objA = { a: 1, b: { c: 2 } }; const objB = { b: { c: 2 }, a: 1 }; const objC = { a: 1, b: { c: 3 } }; console.log(_.isEqual(objA, objB)); // true console.log(_.isEqual(objA, objC)); // false // 循环引用也能正确处理 const objD = {}; objD.a = objD; const objE = {}; objE.a = objE; console.log(_.isEqual(objD, objE)); // true
优点:
- 功能强大,考虑周全,能处理各种特殊情况,包括循环引用。
- 性能较好,经过优化。
- 代码简洁。
缺点:
- 需要引入 Lodash 库,增加项目体积。
为什么直接使用 == 或 === 不行?
== 和 === 比较的是对象的引用,而不是对象的内容。即使两个对象拥有完全相同的属性和值,但它们在内存中的地址不同,所以 == 和 === 会返回 false。
const obj1 = { a: 1 }; const obj2 = { a: 1 }; console.log(obj1 == obj2); // false console.log(obj1 === obj2); // false
什么时候应该使用哪种方法?
- 简单对象,不考虑顺序,不包含特殊类型: JSON.stringify() 转换后比较。
- 需要考虑属性顺序,包含特殊类型,但不确定是否有循环引用: 递归深度比较,并注意处理 Date 和 RegExp 类型。
- 需要考虑各种情况,包括循环引用,并且对性能有一定要求: 使用 Lodash 的 _.isEqual() 方法。
如何优化深度比较的性能?
深度比较的性能瓶颈主要在于递归遍历对象的所有属性。可以从以下几个方面进行优化:
- 预先判断类型: 在递归之前,先判断两个对象的类型是否相同,如果不同,直接返回 false。
- 缓存已经比较过的对象: 对于循环引用的情况,可以缓存已经比较过的对象,避免重复比较。
- 减少不必要的递归: 如果两个对象的属性数量不同,可以直接返回 false,避免继续递归。
- 使用迭代代替递归: 将递归转换为迭代,可以避免栈溢出的问题,并可能提高性能。
深度比较中常见的坑有哪些?
- 循环引用: 如果对象存在循环引用,会导致无限递归,最终栈溢出。
- 特殊类型: Date、RegExp、Function 等特殊类型需要特殊处理,否则可能导致错误的比较结果。
- 属性顺序: 不同的属性顺序可能导致比较结果不一致,需要根据实际情况进行处理。
- 原型链: 深度比较默认只会比较对象自身的属性,不会比较原型链上的属性。如果需要比较原型链上的属性,需要特殊处理。
如何处理包含函数的对象的深度比较?
由于函数比较的特殊性(通常比较的是函数的引用,而不是函数的内部实现),深度比较包含函数的对象通常比较困难。一种常见的做法是:
- 忽略函数: 在深度比较时,直接忽略函数类型的属性。
- 比较函数字符串: 将函数转换为字符串,然后比较字符串是否相等(不推荐,因为函数的内部实现可能不同,但字符串相同)。
- 自定义比较规则: 根据实际情况,自定义函数的比较规则。例如,可以比较函数的名称、参数等。
总而言之,选择哪种方法取决于你的具体需求和场景。没有银弹,适合你的才是最好的。