json数据对比

JSON 数据对比有什么用

JSON（JavaScript Object Notation）是现代 API 和配置文件最常用的数据格式。开发中经常遇到这些问题：

• 两次接口返回的数据有什么不同？
• 配置文件修改了哪些内容？
• 数据库更新前后的数据差异？
• 代码重构后数据结构是否一致？

用手工比对几十行甚至上百行的 JSON 几乎不可能，必须借助工具。

JSON 对比的核心难点

1. 顺序无关对比

JSON 对象的字段顺序不影响语义，但字符串对比会认为顺序不同就是不同：

// 这两段 JSON 语义完全相同
{"name": "Clover", "age": 16}
{"age": 16, "name": "Clover"}

// 字符串对比：❌ 不相同（顺序不同）
// 结构对比：✅ 相同（字段一样）

2. 嵌套层级

深层嵌套的对象，要能准确定位到"哪个路径下的哪个值"变了：

{
  "user": {
    "profile": {
      "name": "Clover",
      "settings": {
        "theme": "dark",    // ← 这里变了
        "lang": "zh"
      }
    }
  }
}

3. 数组元素对比

数组顺序敏感时，位置对应比较；顺序不敏感时，需要智能匹配元素：

旧: ["apple", "banana", "cherry"]
新: ["banana", "apple", "date"]
// 变化：cherry被删除了，date新增了，apple和banana顺序变了

常见的 JSON Diff 算法

1. Deep Diff（深度递归对比）

最常用。递归遍历两个对象的所有层级，生成差异列表：

const oldObj = {a: 1, b: {c: 2}};
const newObj = {a: 1, b: {c: 3}};

deepDiff(oldObj, newObj);
// 结果：[ {path: ['b','c'], oldValue: 2, newValue: 3} ]

2. RFC 6902 JSON Patch

生成标准的 Patch 文档，可以精确描述如何把 A 变成 B：

[
  {"op": "replace", "path": "/b/c", "value": 3},
  {"op": "add", "path": "/d", "value": 4},
  {"op": "remove", "path": "/e"}
]
// op: replace=替换, add=新增, remove=删除

3. JSON Merge Patch（RFC 7386）

简单场景：用新对象覆盖旧对象，null 表示删除：

旧: {"a": 1, "b": 2}
新: {"a": 1, "b": 3, "c": null}
结果: {"a": 1, "b": 3}  // c:2被删除（null表示删除）

实战：前后端数据校验

// 场景：用户提交了修改资料，验证哪些字段变了
const userBefore = {
  name: "Clover",
  email: "clover@example.com",
  avatar: "https://...",
  role: "admin"
};

const userAfter = {
  name: "☘️ Clover",
  email: "clover@example.com",
  avatar: "https://new...",
  role: "admin"
};

// 只提交变化的字段，减少请求体积
const changedFields = {};
for (const key of Object.keys(userAfter)) {
  if (JSON.stringify(userBefore[key]) !== JSON.stringify(userAfter[key])) {
    changedFields[key] = userAfter[key];
  }
}
console.log(changedFields);
// 输出: {name: "☘️ Clover", avatar: "https://new..."}
// email 和 role 没变，不提交！

常用 JSON 对比工具推荐

• JSON 数据对比工具 — 可视化高亮差异，支持复制修改后的 JSON
• VSCode 插件：JSON Tools
• JetBrains 系列：内置 JSON 对比支持

注意事项

浮点数精度问题

const a = 0.1 + 0.2;   // 0.30000000000000004
const b = 0.3;
console.log(a === b);   // false！不能用 === 对比浮点数

// 正确做法：指定精度后再对比
const epsilon = 1e-10;
console.log(Math.abs(a - b) < epsilon); // true

大文件处理

对于几 MB 以上的 JSON，浏览器可能会卡顿。建议：

• 先做粗粒度对比（顶层 keys），确认差异路径
• 再定位到具体文件做细粒度对比
• 大文件用专业桌面工具（如 Beyond Compare）

总结

JSON 对比的核心是结构化对比而非字符串对比。选对算法和工具，能把几小时的人工对比变成几秒钟的自动分析。需要在线使用？试试 JSON 数据对比工具。