JavaScript深度比较数组与对象相等性的实现方案
作者:异步漫步时间:2026-10-26 13:13:10浏览:490
本文介绍在JavaScript中判断两个数组或对象是否完全相等的方法。针对引用类型直接比较返回false的问题,提供了一套包含绝对相等与形状内容相等的深度比较工具函数。代码涵盖字符串、数字、嵌套对象及数组的对比测试,并处理了时间对象等特殊情况,适用于SKU配置等需要精确匹配的场景。
在JavaScript中判断两个数组对象是否完全相等
主要探讨如何判断两个数组是否完全相等,以及如何判断两个对象是否完全相等
该功能常见于SKU库存配置等应用场景
在每次向数组插入新值时,都需要判断之前选中的数组中是否已存在该数组对象
arrayEquals(array1, array2) {
// if array1 or array2 is a falsy value, return
if (!array1 || !array2)
return false;
// compare lengths - can save a lot of time
if (array1.length != array2.length)
return false;
for (var i = 0, l = array1.length; i < l; i++) {
// Check if we have nested arrays
if (array1[i] instanceof Array && array2[i] instanceof Array) {
// recurse into the nested arrays
if (!this.arrayEquals(array1[i], array2[i]))
return false;
} else if (array1[i] instanceof Object && array2[i] instanceof Object) {
// 比较含有的对象是否相等
if (!this.objectEquals(array1[i], array2[i]))
return false;
} else if (array1[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
},
objectEquals(object1, object2) {
//For the first loop, we only check for types
for (let propName in object1) {
//Check for inherited methods and properties - like .equals itself
//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
//Return false if the return value is different
if (object1.hasOwnProperty(propName) != object2.hasOwnProperty(propName)) {
return false;
}
//Check instance type
else if (typeof object1[propName] != typeof object2[propName]) {
//Different types => not equal
return false;
}
}
//Now a deeper check using other objects property names
for (let propName in object2) {
//We must check instances anyway, there may be a property that only exists in object2
//I wonder, if remembering the checked values from the first loop would be faster or not
if (object1.hasOwnProperty(propName) != object2.hasOwnProperty(propName)) {
return false;
} else if (typeof object1[propName] != typeof object2[propName]) {
return false;
}
//If the property is inherited, do not check any more (it must be equa if both objects inherit it)
if (!object1.hasOwnProperty(propName))
continue;
//Now the detail check and recursion
//This returns the script back to the array comparing
/**REQUIRES Array.equals**/
if (object1[propName] instanceof Array && object2[propName] instanceof Array) {
// recurse into the nested arrays
if (!this.arrayEquals(object1[propName], object2[propName]))
return false;
} else if (object1[propName] instanceof Object && object2[propName] instanceof Object) {
// recurse into another objects
if (!this.objectEquals(object1[propName], object2[propName]))
return false;
}
//Normal value comparison for strings and numbers
else if (object1[propName] != object2[propName]) {
return false;
}
}
//If everything passed, let's say YES
return true;
}
JavaScript中判断两个对象相等的办法,包含绝对相等和形状内容相等
在JavaScript中对象属于引用类型,除非是同一个引用,否则对象不会相等,示例如下:
var obj1={0:'a',1:'b',2:'c'}
var obj2={0:'a',1:'b',2:'c'}
console.log(obj1==obj2)
console.log(obj1===obj2)上述代码打印结果均为false,尽管它们外观相同。当需要判断对象的形状和内容都一致时,例如上面的obj1和obj2,该如何处理?解决方案如下:
完整代码实现:
//判断两个对象是否相同(包含绝对相等和他们是否有相同的形状)
function looseEqual (a, b) {
if (a === b) { //如果是绝对相等就直接返回true
return true ;
}
//如果不是绝对相等就哦按的他们是否有相同的形状
var isObjectA = isObject(a);
var isObjectB = isObject(b);
if (isObjectA && isObjectB) {//两个均是对象
try {
var isArrayA = Array.isArray(a);
var isArrayB = Array.isArray(b);
if (isArrayA && isArrayB) {//如果都是数组
if(a.length === b.length){//如果长度相等
return a.every(function (e, i) {//用every和递归来比对a数组和b数组的每个元素,并返回
return looseEqual(e, b[i])
})
}
//长度都不等直接返回false
return false;
} else if (a instanceof Date && b instanceof Date) {//如果是Date 则直接getTime 比较
return a.getTime() === b.getTime()
} else if (!isArrayA && !isArrayB) {//对象的比较
//拿到两个对象的key
var keysA = Object.keys(a);
var keysB = Object.keys(b);
if(keysA.length === keysB.length){//如果keys相等
return keysA.every(function (key) {//用every和递归来比对a对象和b对象的每个元素值,并返回
return looseEqual(a[key], b[key]);
})
}
//长度都不等直接返回false
return false;
} else {
return false
}
} catch (e) {
return false
}
} else if (!isObjectA && !isObjectB) {//如果都不是对象则按String来处理
return String(a) === String(b)
} else {
return false
}
}
function isObject (obj) {
return obj !== null && typeof obj === 'object'
}进行一轮测试:
//字符
var str1="abc";
var str2="abc";
console.log(looseEqual(str1,str2))
//数字
var num1=12222;
var num2=12222;
console.log(looseEqual(num1,num2))
//对象
var obj1={0:'a',1:'b',2:'c'}
var obj2={0:'a',1:'b',2:'c'}
console.log(looseEqual(obj1,obj2))
//对象嵌套数组
var obj1={0:'a',1:'b',2:[1,2,3]}
var obj2={0:'a',1:'b',2:[1,2,3]}
console.log(looseEqual(obj1,obj2))
//类数组
var a={0:'a',1:'b',2:'c','length':3}
var b={0:'a',1:'b',2:'c','length':3}
console.log(looseEqual(a,b))
//数组
var list=[1,2,3,4]
var list1=[1,2,3,4]
console.log(looseEqual(list,list1))
//数组嵌套
list=[1,2,3,[6,7]]
list1=[1,2,3,[6,7]]
console.log(looseEqual(list,list1))
//数组嵌套对象
list=[1,2,3,{a:'1',b:'7'}]
list1=[1,2,3,{a:'1',b:'7'}]
console.log(looseEqual(list,list1))
var d1 = new Date();
var d2 = new Date();
console.log(looseEqual(d1,d2))
var d3 = new Date();
var d4 ;
//使用延时来赋值d4
setTimeout(function(){
d4 = new Date();
console.log(looseEqual(d3,d4))
},1);
输出结果展示:

除了最后一个涉及时间的测试外,我们使用了setTimeout来验证,其余测试均通过。这应该是一个不错的工具函数,哈哈!
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。
作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
