jq怎么比较json是否相等

使用 jQuery 比较两个 JSON 对象是否相等

在 JavaScript 开发中，JSON 是数据交互的核心格式，而比较两个 JSON 对象是否相等是常见的需求，虽然 jQuery 作为一个轻量级的 JavaScript 库，主要用于 DOM 操作、事件处理和 AJAX 请求，并没有直接提供“JSON 比较”的内置方法，但我们可以结合 jQuery 的工具函数和 JavaScript 原生特性，高效实现 JSON 对象的深度比较，本文将详细介绍使用 jQuery 比较 JSON 对象相等的多种方法，从基础到进阶,助你核心技巧。

理解 JSON 对象比较的核心挑战

在开始比较之前，我们需要明确 JSON 对象相等的定义：两个 JSON 对象的“结构”和“值”完全相同，且顺序一致（对于数组而言），但实际开发中，JSON 对象比较常遇到以下问题：

基本数据类型比较：如 1 和 "1"（数字 vs 字符串）、true 和 "true"（布尔 vs 字符串）是否视为相等？
嵌套对象/数组比较：多层嵌套的 JSON 如何递归比较？
属性顺序差异：{a: 1, b: 2} 和 {b: 2, a: 1} 是否视为相等？（严格模式下顺序不同则不等）
特殊值处理：null、undefined、NaN 的比较逻辑。

明确这些挑战后,我们再选择合适的比较方法。

方法一：jQuery.isEmptyObject() + 严格相等（仅适用于简单场景）

JSON 对象是“扁平结构”（无嵌套，且属性顺序一致），可以先用 jQuery.isEmptyObject() 判断是否为空对象，再通过严格比较值。

示例代码

const json1 = { name: "张三", age: 18 };
const json2 = { name: "张三", age: 18 };
const json3 = { name: "李四", age: 20 };
// 1. 先判断是否为空对象（非必须，但可优化性能）
if (!jQuery.isEmptyObject(json1) && !jQuery.isEmptyObject(json2)) {
    // 2. 严格比较（要求属性顺序和值完全一致）
    const isEqual = JSON.stringify(json1) === JSON.stringify(json2);
    console.log("JSON1 和 JSON2 是否相等？", isEqual); // true
}
const isEqual2 = JSON.stringify(json1) === JSON.stringify(json3);
console.log("JSON1 和 JSON3 是否相等？", isEqual2); // false

优缺点分析

优点：简单直观，依赖 jQuery 的基础工具函数，适合扁平、无顺序差异的 JSON。
缺点：
- 无法处理嵌套对象（需递归，但 isEmptyObject() 仅判断顶层是否为空）；
- 对属性顺序敏感，顺序不同会误判；
- 无法区分 1 和 "1" 等类型差异（JSON.stringify() 会统一转为字符串）。

方法二：jQuery.extend() + 递归比较（适用于嵌套 JSON）

对于嵌套 JSON 对象，我们需要递归比较每个层级的属性，此时可以利用 jQuery.extend()（合并对象）的特性，通过“深拷贝+对比”实现比较。

核心思路

使用 jQuery.extend(true, {}, obj) 对 JSON 对象进行深拷贝，避免修改原对象；
递归遍历两个对象的每个属性，比较类型和值：
- 基本类型（string、number、boolean、null、undefined）：直接用比较；
- 对象/数组：递归调用比较函数。

示例代码

function isJsonEqual(obj1, obj2) {
    // 1. 先判断类型是否一致
    if (typeof obj1 !== typeof obj2) return false;
    // 2. 处理 null 或 undefined
    if (obj1 === null || obj2 === null) return obj1 === obj2;
    if (obj1 === undefined || obj2 === undefined) return obj1 === obj2;
    // 3. 处理数组（jQuery.isArray() 可判断数组）
    if (jQuery.isArray(obj1) && jQuery.isArray(obj2)) {
        if (obj1.length !== obj2.length) return false;
        for (let i = 0; i < obj1.length; i++) {
            if (!isJsonEqual(obj1[i], obj2[i])) return false;
        }
        return true;
    }
    // 4. 处理普通对象
    if (typeof obj1 === 'object' && typeof obj2 === 'object') {
        const keys1 = Object.keys(obj1);
        const keys2 = Object.keys(obj2);
        // 属性数量不同，直接返回 false
        if (keys1.length !== keys2.length) return false;
        // 递归比较每个属性的值
        for (const key of keys1) {
            if (!keys2.includes(key) || !isJsonEqual(obj1[key], obj2[key])) {
                return false;
            }
        }
        return true;
    }
    // 5. 基本类型直接比较
    return obj1 === obj2;
}
// 测试用例
const json1 = { 
    name: "张三", 
    info: { age: 18, hobbies: ["篮球", "阅读"] } 
};
const json2 = { 
    name: "张三", 
    info: { age: 18, hobbies: ["篮球", "阅读"] } 
};
const json3 = { 
    name: "李四", 
    info: { age: 20, hobbies: ["足球"] } 
};
console.log("JSON1 和 JSON2 是否相等？", isJsonEqual(json1, json2)); // true
console.log("JSON1 和 JSON3 是否相等？", isJsonEqual(json1, json3)); // false

优缺点分析

优点：支持嵌套对象/数组，能正确处理类型和属性顺序（严格模式），逻辑清晰。
缺点：需要手动编写递归逻辑，代码量稍大；对于超大型 JSON（如 1000+ 层级），递归可能导致栈溢出（需改用迭代法）。

方法三：第三方库 + jQuery 辅助（推荐复杂场景）

如果项目已引入 Lodash 等工具库，可以直接使用其深度比较函数（如 _.isEqual），再结合 jQuery 的 AJAX 或数据处理场景,实现高效比较。

示例代码（基于 Lodash）

// 假设已引入 Lodash：jQuery 可配合其 AJAX 方法获取 JSON 数据
const json1 = { a: 1, b: { c: 2, d: [3, 4] } };
const json2 = { a: 1, b: { c: 2, d: [3, 4] } };
const json3 = { a: 1, b: { c: 2, d: [4, 3] } };
// 使用 Lodash 的 isEqual 进行深度比较
const isEqual = _.isEqual(json1, json2);
console.log("JSON1 和 JSON2 是否相等？", isEqual); // true
const isEqual2 = _.isEqual(json1, json3);
console.log("JSON1 和 JSON3 是否相等？", isEqual2); // false（数组顺序不同）

结合 jQuery AJAX 的场景

// 通过 jQuery AJAX 获取两个 JSON 数据，进行比较
$.getJSON("data1.json", function(data1) {
    $.getJSON("data2.json", function(data2) {
        const isEqual = _.isEqual(data1, data2);
        console.log("远程 JSON 数据是否相等？", isEqual);
    });
});