JavaScript中不能直接用==或===比较对象内容是否相等，因为它们仅检查引用地址是否相同；要实现内容相等比较，需进行深度比较，具体步骤包括：1. 使用===检查严格相等，处理基本类型和同一引用的情况；2. 特殊处理nan，通过isnan()判断两个nan相等；3. 确保两者均为非NULL对象且类型一致；4. 比较构造函数，确保如date、regexp等特殊对象类型匹配；5. 对date对象比较gettime()值；6. 对regexp对象比较source和flags；7. 数组需先比较长度，再递归比较每个元素；8. 普通对象比较属性数量，并遍历每个属性递归比较值；该方法可准确判断对象内容是否相等，但需注意循环引用可能导致栈溢出，完整实现应增加已访问对象集合来避免。
JavaScript中直接使用
==
或
===
比较两个对象时，它们只会检查这两个变量是否指向内存中的同一个对象引用，而不是比较它们内部包含的数据是否一致。因此，要判断两个对象的内容是否相等，我们需要遍历它们的属性，进行逐一比对。
解决方案
判断JavaScript对象内容是否相等，核心在于递归地比较它们的每一个属性。这比听起来要复杂一些，因为对象内部可能嵌套着其他对象、数组，甚至是一些特殊类型如日期或正则表达式。我个人觉得，一个健壮的比较函数需要考虑以下几个方面：
- 基本类型（Primitives）的比较：数字、字符串、布尔值、
null
、
和
，直接用
===
即可。需要注意的是
NaN
，
NaN === NaN
是
false
，所以需要特殊处理。
- 引用类型（Objects/Arrays）的比较：
- 引用地址相同：如果两个变量指向同一个对象，那它们当然相等。
- 类型检查：确保两者都是对象，并且是相同类型（例如，都是数组，或都是普通对象，或都是日期对象）。
- 属性数量：如果属性数量不同，那它们肯定不相等。
- 递归比较属性值：遍历一个对象的所有属性，并递归地比较其对应的值。如果值是基本类型，直接比较；如果是引用类型，则再次进入递归。
- 特殊对象处理：
Date
对象需要比较它们的
getTime()
值；
RegExp
对象需要比较它们的
source
和
flags
。
- 数组比较：先比较长度，然后逐个元素进行递归比较。
这是一个实现深度比较的JavaScript函数，它尝试覆盖了大部分常见场景：
function deepEqual(obj1, obj2) { // 1. 严格相等检查：处理基本类型、null、undefined、以及指向同一内存地址的对象 if (obj1 === obj2) { return true; } // 2. 处理 NaN 的特殊情况 if (typeof obj1 === 'number' && typeof obj2 === 'number' && isNaN(obj1) && isNaN(obj2)) { return true; } // 3. 检查是否都是对象且非 null if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) { return false; } // 4. 检查构造函数是否一致，确保类型相同 (例如，都是Date对象，而不是一个Date一个普通Object) if (obj1.constructor !== obj2.constructor) { return false; } // 5. 特殊对象类型处理 // Date 对象比较 if (obj1 instanceof Date) { return obj1.getTime() === obj2.getTime(); } // RegExp 对象比较 if (obj1 instanceof RegExp) { return obj1.source === obj2.source && obj1.flags === obj2.flags; } // 6. 数组比较 if (Array.isArray(obj1)) { if (obj1.Length !== obj2.length) { return false; } for (let i = 0; i < obj1.length; i++) { if (!deepEqual(obj1[i], obj2[i])) { return false; } } return true; } // 7. 普通对象比较 const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) { return false; } for (let i = 0; i < keys1.length; i++) { const key = keys1[i]; // 确保 obj2 也有这个 key，并且对应的值也深度相等 if (!Object.prototype.hasOwnProperty.call(obj2, key) || !deepEqual(obj1[key], obj2[key])) { return false; } } return true; } // 示例用法 // const objA = { a: 1, b: { c: 2 }, d: [3, { e: 4 }], f: new Date('2023-01-01'), g: /abc/i, h: NaN }; // const objB = { a: 1, b: { c: 2 }, d: [3, { e: 4 }], f: new Date('2023-01-01'), g: /abc/i, h: NaN }; // const objC = { a: 1, b: { c: 99 } }; // console.log(deepEqual(objA, objB)); // true // console.log(deepEqual(objA, objC)); // false // console.log(deepEqual({x: NaN}, {x: NaN})); // true // console.log(deepEqual(new Date('2023-01-01'), new Date('2023-01-01'))); // true
为什么JavaScript对象不能直接用
==
==
或
===
比较？
这其实是个老生常谈的问题，但每次遇到还是得琢磨一下。JavaScript的数据类型大致可以分为两类：基本类型（Primitive Types）和引用类型（Reference Types）。
基本类型包括：
、
number
、
、
null
、
undefined
、
Symbol
和
bigint
。当你比较两个基本类型的值时，
==
或
===
会直接比较它们的值。比如
1 === 1
是
true
，
'hello' === 'hello'
也是
true
。
而对象（包括普通对象、数组、函数、日期、正则表达式等）都属于引用类型。它们的值并不是直接存储在变量里，变量里存储的只是一个指向内存中实际数据位置的“引用”或者说“地址”。所以，当你用
==
或
===
比较两个对象时，它们比较的不是对象内部的内容，而是这两个变量存储的引用地址是否相同。
举个例子，你可能会觉得下面这段代码会输出
true
：
const obj1 = { name: 'Alice' }; const obj2 = { name: 'Alice' }; console.log(obj1 === obj2); // 结果是 false
尽管
obj1
和
obj2
看起来内容一模一样，但它们在内存中是两个独立的、不同的对象实例，因此它们的引用地址是不同的。这就好比你有两张一模一样的A4纸，上面写的内容完全一样，但它们毕竟是两张独立的纸，不是同一张。
obj1 === obj2
就相当于在问：“这两张纸是同一张纸吗？”答案自然是“不是”。
实现一个基础的浅层对象比较函数
有时候，我们并不需要那么复杂的深度比较，只需要检查对象的第一层属性是否相等就够了。这被称为“浅层比较”（Shallow Comparison）。浅层比较通常用于优化性能，或者在确定对象结构不会有深层嵌套时。
一个基础的浅层比较函数通常会做以下几件事：
- 检查两个对象是否是同一个引用（
obj1 === obj2
）。
- 检查它们是否都是非
null
的对象类型。
- 获取两个对象的所有属性名。
- 比较属性名的数量是否一致。
- 遍历其中一个对象的属性名，检查另一个对象是否也拥有相同的属性名，并且对应属性的值是严格相等的（
===
）。
这是一个简单的浅层比较实现：
function shallowEqual(objA, objB) { // 如果是同一个引用，或者都是基本类型且值相等，直接返回 true if (objA === objB) { return true; } // 如果其中一个不是对象或者为 null，那它们不相等（因为前面已经排除了 objA === objB 的情况） if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { return false; } const keysA = Object.keys(objA); const keysB = Object.keys(objB); // 属性数量不一致，肯定不相等 if (keysA.length !== keysB.length) { return false; } // 遍历属性，检查值是否严格相等 for (let i = 0; i < keysA.length; i++) { const key = keysA[i]; // 确保 objB 也有此属性，且值严格相等 if (!Object.prototype.hasOwnProperty.call(objB, key) || objA[key] !== objB[key]) { return false; } } return true; } // 示例 // const data1 = { name: 'Bob', age: 30 }; // const data2 = { name: 'Bob', age: 30 }; // const data3 = { name: 'Bob', age: 30, city: 'NY' }; // const data4 = { name: 'Bob', details: { id: 1 } }; // const data5 = { name: 'Bob', details: { id: 1 } }; // 注意这里，details 是嵌套对象，浅比较会失败 // console.log(shallowEqual(data1, data2)); // true // console.log(shallowEqual(data1, data3)); // false (属性数量不同) // console.log(shallowEqual(data4, data5)); // false (因为 {id: 1} !== {id: 1}，引用不同)
浅层比较的局限性在于，它无法处理嵌套的对象或数组。如果一个属性的值本身又是一个对象，那么浅层比较只会检查这两个引用是否相同，而不会深入到嵌套对象内部去比较它们的内容。这在上面
data4
和
data5
的例子中体现得很明显。
如何进行深度对象比较，处理嵌套结构和特殊类型？
深度对象比较（Deep Comparison），顾名思义，就是递归地深入到对象的每一个层级，比较所有嵌套的属性和元素，直到所有的基本类型值都匹配为止。这在很多场景下都非常有用，比如测试框架中比较期望结果和实际结果，或者在React/vue等框架中判断组件的
props
或
state
是否真正发生了变化以避免不必要的渲染。
实现一个完善的深度比较函数，需要处理的细节远不止普通的键值对。我个人在写这种函数时，会特别注意以下几点：
- 递归是核心：当遇到属性值是对象或数组时，必须再次调用比较函数本身。这是深度比较的精髓所在。
- 处理各种数据类型：
- 基本类型：直接用
===
。但别忘了
NaN
的特殊性，
NaN === NaN
是
false
，所以需要
isNaN(a) && isNaN(b)
来判断。
-
null
和
：它们是基本类型，但又是特殊的“空”值，通常在对象检查前就处理掉。undefined
- 数组：比较它们的
length
，然后逐个索引进行递归比较。数组元素的顺序很重要。
- 日期对象 (
Date
)
：不能直接比较，需要比较它们的getTime()
方法返回的毫秒数。
- 正则表达式 (
RegExp
)
：比较它们的source
（正则表达式的字符串形式）和
flags
（如
'i'
、
'g'
等）。
- 函数 (
Function
)
：通常情况下，两个不同的函数实例即使代码相同，也被认为是不同的。深度比较一般不比较函数内容，直接认为不相等，或者跳过比较。在我的实现里，如果函数作为属性值，它们引用不同就会被判为不相等。 -
：作为属性名或属性值，按基本类型处理。
Symbol
- 基本类型：直接用
- 循环引用（Circular References）：这是一个比较高级但也非常棘手的问题。如果对象A的某个属性引用了对象B，而对象B的某个属性又引用了对象A，就会形成一个循环。如果不处理，递归比较会陷入无限循环，导致栈溢出。通常的解决方案是维护一个已访问过的对象对（
[obj1, obj2]
）的集合，在每次递归前检查当前要比较的两个对象是否已经在集合中，如果在，则直接返回
true
（因为它们已经在之前的路径中被判定为相等并访问过了），避免重复比较。不过，对于大多数日常使用场景，如果确定数据结构不会有循环引用，可以暂时不考虑这个复杂性。我上面提供的
deepEqual
函数没有直接处理循环引用，在存在循环引用的情况下会栈溢出。
理解这些细节，能够帮助我们写出更鲁棒、更符合实际需求的比较函数。当然，在实际项目中，很多时候会直接使用像Lodash的
_.isEqual
这样的成熟库函数，它们已经处理了绝大多数的复杂情况，包括循环引用等。但理解其背后的原理，对于我们解决问题和调试代码仍然至关重要。
