在前后端交互或者数据处理场景中,比较两个不同JSON数组的值是非常常见的需求,比如校验接口返回数据是否和本地缓存一致、找出两个数据集的差异项等。不同的比较需求对应不同的实现逻辑,下面分场景介绍具体的实现方法。

场景一:比较两个JSON数组是否完全相等
如果要求两个数组的元素顺序、内容都完全一致,且数组元素是基本类型(字符串、数字、布尔值等),可以直接将数组转为JSON字符串后比较。
// 定义两个待比较的JSON数组
const arr1 = [1, "test", true, null];
const arr2 = [1, "test", true, null];
const arr3 = [1, "test", null, true];
// 基本类型数组比较,顺序一致才返回true
function isArrayEqualBasic(arrA, arrB) {
// 先判断长度是否一致
if (arrA.length !== arrB.length) {
return false;
}
// 转为JSON字符串比较
return JSON.stringify(arrA) === JSON.stringify(arrB);
}
console.log(isArrayEqualBasic(arr1, arr2)); // 输出 true
console.log(isArrayEqualBasic(arr1, arr3)); // 输出 false,顺序不同
如果数组包含对象元素,且需要深度比较对象内容,上述方法依然适用,因为JSON.stringify会递归处理对象的所有属性。
const objArr1 = [{id: 1, name: "张三"}, {id: 2, name: "李四"}];
const objArr2 = [{id: 1, name: "张三"}, {id: 2, name: "李四"}];
const objArr3 = [{id: 2, name: "李四"}, {id: 1, name: "张三"}];
// 包含对象的数组比较,顺序一致且对象内容一致才返回true
console.log(isArrayEqualBasic(objArr1, objArr2)); // 输出 true
console.log(isArrayEqualBasic(objArr1, objArr3)); // 输出 false
场景二:忽略顺序比较两个JSON数组是否包含相同元素
如果只需要判断两个数组包含的元素完全相同,不需要考虑元素顺序,可以先对数组排序后再比较,或者使用集合的方式处理。
方法1:排序后比较
适合基本类型数组,对象数组排序需要自定义排序规则,否则可能不符合预期。
function isArrayEqualIgnoreOrder(arrA, arrB) {
if (arrA.length !== arrB.length) {
return false;
}
// 基本类型排序,注意数字排序需要传入比较函数
const sortedA = [...arrA].sort((a, b) => {
if (a === null) return -1;
if (b === null) return 1;
return a > b ? 1 : -1;
});
const sortedB = [...arrB].sort((a, b) => {
if (a === null) return -1;
if (b === null) return 1;
return a > b ? 1 : -1;
});
return JSON.stringify(sortedA) === JSON.stringify(sortedB);
}
const arr4 = [1, 2, 3, null];
const arr5 = [3, null, 1, 2];
console.log(isArrayEqualIgnoreOrder(arr4, arr5)); // 输出 true
方法2:使用集合去重比较
适合元素都是基本类型且不存在重复元素的场景,先去重再比较长度和内容。
function isArrayEqualBySet(arrA, arrB) {
const setA = new Set(arrA);
const setB = new Set(arrB);
if (setA.size !== setB.size) {
return false;
}
// 检查setA的所有元素是否都在setB中
for (const item of setA) {
if (!setB.has(item)) {
return false;
}
}
return true;
}
console.log(isArrayEqualBySet(arr4, arr5)); // 输出 true
场景三:找出两个JSON数组的差异元素
实际开发中经常需要找出两个数组的不同之处,比如新增的元素、删除的元素。
找出arr1有但arr2没有的元素
function getDifference(arrA, arrB) {
// 使用filter筛选arrA中不在arrB的元素
return arrA.filter(item => {
// 对象元素需要用JSON.stringify比较,基本类型直接比较
if (typeof item === "object" && item !== null) {
return !arrB.some(bItem => JSON.stringify(bItem) === JSON.stringify(item));
}
return !arrB.includes(item);
});
}
const arr6 = [1, 2, 3, {id: 1}];
const arr7 = [2, 3, 4, {id: 1}];
console.log(getDifference(arr6, arr7)); // 输出 [1]
console.log(getDifference(arr7, arr6)); // 输出 [4]
找出两个数组的相同元素
function getIntersection(arrA, arrB) {
return arrA.filter(item => {
if (typeof item === "object" && item !== null) {
return arrB.some(bItem => JSON.stringify(bItem) === JSON.stringify(item));
}
return arrB.includes(item);
});
}
console.log(getIntersection(arr6, arr7)); // 输出 [2, 3, {id: 1}]
注意事项
- 使用
JSON.stringify比较对象时,对象的属性顺序不一致会导致比较结果不符合预期,比如{a:1,b:2}和{b:2,a:1}的JSON字符串是不同的。 - 如果数组包含函数、undefined、Symbol等类型,
JSON.stringify会忽略这些元素,此时需要自定义深度比较函数。 - 大规模数组比较时,嵌套循环的方式时间复杂度较高,可以根据场景优化比较逻辑,比如先建立哈希表再匹配。
如果需要更复杂的深度比较逻辑,可以参考成熟的工具库如lodash的isEqual方法,避免重复造轮子。
JSON数组数组比较JavaScript数据对比修改时间:2026-07-11 20:36:26