javascript中不能直接用==或===比较对象内容是否相等,因为它们仅检查引用地址是否相同;要实现内容相等比较,需进行深度比较,具体步骤包括:1. 使用===检查严格相等,处理基本类型和同一引用的情况;2. 特殊处理nan,通过isnan()判断两个nan相等;3. 确保两者均为非null对象且类型一致;4. 比较构造函数,确保如date、regexp等特殊对象类型匹配;5. 对date对象比较gettime()值;6. 对regexp对象比较source和flags;7. 数组需先比较长度,再递归比较每个元素;8. 普通对象比较属性数量,并遍历每个属性递归比较值;该方法可准确判断对象内容是否相等,但需注意循环引用可能导致栈溢出,完整实现应增加已访问对象集合来避免。
JavaScript中直接使用
==
===
判断JavaScript对象内容是否相等,核心在于递归地比较它们的每一个属性。这比听起来要复杂一些,因为对象内部可能嵌套着其他对象、数组,甚至是一些特殊类型如日期或正则表达式。我个人觉得,一个健壮的比较函数需要考虑以下几个方面:
null
undefined
Symbol
===
NaN
NaN === NaN
false
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的数据类型大致可以分为两类:基本类型(Primitive Types)和引用类型(Reference Types)。
基本类型包括:
string
number
boolean
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
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
[obj1, obj2]
true
deepEqual
理解这些细节,能够帮助我们写出更鲁棒、更符合实际需求的比较函数。当然,在实际项目中,很多时候会直接使用像Lodash的
_.isEqual
以上就是js怎么比较两个对象是否相等的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号