如何比较两个不同JSON数组中的值

来源:编程网作者:又改需求头衔:程序员
导读:本期聚焦于小伙伴创作的《如何比较两个不同JSON数组中的值》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何比较两个不同JSON数组中的值》有用,将其分享出去将是对创作者最好的鼓励。

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

如何比较两个不同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

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。