前端js如何比较json对象

浅出：前端JS如何高效比较JSON对象

在前端开发中,JSON（JavaScript Object Notation）对象是我们与后端交互、处理复杂数据结构的核心，无论是表单校验、状态管理，还是数据同步，我们经常需要比较两个JSON对象是否“相等”，由于JavaScript中对象的引用特性，简单的 或 往往无法满足我们的需求，本文将探讨在前端JS中比较JSON对象的各种方法，从基础到进阶，帮助你选择最适合的场景。

为什么不能直接用 或 ？

在学习正确方法前,我们首先要理解一个核心概念：在JavaScript中，对象是引用类型。

// 创建两个结构完全相同但引用不同的对象
const objA = { name: 'Alice', age: 25 };
const objB = { name: 'Alice', age: 25 };
console.log(objA == objB); // false
console.log(objA === objB); // false

为什么结果是 false？因为 比较的是两个变量的内存地址。objA 和 objB 是两个在内存中独立创建的对象，它们指向不同的地址，即使内容一模一样， 也会判定为不相等。

要比较JSON对象,我们必须绕开引用比较，转而比较它们的。

方法一：JSON序列化后比较（简单但有限）

这是最直观、最简单的方法，我们将两个对象都转换成JSON字符串，然后比较这两个字符串是否相等。

const objA = { name: 'Alice', age: 25, city: 'New York' };
const objB = { name: 'Alice', age: 25, city: 'New York' };
const objC = { name: 'Bob', age: 30 };
function compareByJSONStringify(a, b) {
  return JSON.stringify(a) === JSON.stringify(b);
}
console.log(compareByJSONStringify(objA, objB)); // true
console.log(compareByJSONStringify(objA, objC)); // false

优点：

• 实现简单：一行代码即可搞定。
• 逻辑清晰：直接比较对象的完整表示。

缺点（非常重要！）：

1. 属性顺序敏感：如果对象的属性顺序不同，结果也会是 false，这是该方法最大的局限性。

   const objD = { name: 'Alice', age: 25 };
   const objE = { age: 25, name: 'Alice' };
   console.log(compareByJSONStringify(objD, objE)); // false! 但它们内容是等价的。

2. 特殊值处理不当：对于 undefined、Symbol、function、Infinity 等特殊值，JSON.stringify 会直接忽略或转换为 null，可能导致不准确的结果。

   const objF = { a: undefined, b: function() {} };
   console.log(JSON.stringify(objF)); // "{}"  所有内容都丢失了！

适用场景：当你能100%保证所有待比较的对象属性顺序完全一致，且不包含上述特殊值时，可以用此方法进行快速比较。

方法二：深度递归比较（最健壮、最常用）

这是最准确、最通用的方法，能够完美解决上述所有问题，其核心思想是：递归地遍历两个对象的所有属性，并逐一比较它们的值。

我们可以自己实现一个深度比较函数,也可以使用成熟的库函数。

手动实现一个深度比较函数

function deepEqual(a, b) {
  // 1. 处理基本类型和null
  if (a === b) return true;
  // 2. 处理null或undefined
  if (a == null || b == null) return false;
  // 3. 判断是否为对象（数组也是对象）
  if (typeof a !== 'object' || typeof b !== 'object') {
    return false; // 如果不是对象，且前面a !== b，则必然不相等
  }
  // 4. 获取两个对象的键数组
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  // 5. 比较键的数量是否相同
  if (keysA.length !== keysB.length) {
    return false;
  }
  // 6. 递归比较每个键的值
  for (const key of keysA) {
    // 确保b也有这个键
    if (!b.hasOwnProperty(key)) {
      return false;
    }
    // 递归比较
    if (!deepEqual(a[key], b[key])) {
      return false;
    }
  }
  // 所有比较都通过，返回true
  return true;
}
// 测试
const objA = { name: 'Alice', age: 25, address: { city: 'New York', zip: 10001 } };
const objB = { name: 'Alice', age: 25, address: { city: 'New York', zip: 10001 } };
const objC = { name: 'Alice', age: 25, address: { city: 'London', zip: 10001 } };
const objD = { age: 25, name: 'Alice' }; // 属性顺序不同
console.log(deepEqual(objA, objB)); // true
console.log(deepEqual(objA, objC)); // false
console.log(deepEqual(objA, objD)); // true (我们的实现是顺序无关的)

优点：

• 准确无误：能正确处理任意嵌套结构、属性顺序不同的情况。
• 逻辑可控：可以自定义比较逻辑，例如忽略某些特定属性。

缺点：

• 实现复杂：需要考虑各种边界情况（循环引用、特殊类型等）。
• 性能开销：对于大型对象，递归调用可能会有性能损耗。

使用成熟库（推荐）

在实际项目中,我们强烈建议使用经过充分测试的库函数，而不是自己“造轮子”，它们更健壮、更高效。

• Lodash: _.isEqual() Lodash 是一个非常流行的工具库，其 _.isEqual 方法是深度比较的黄金标准。

  // 首先需要安装 lodash: npm install lodash
  // 或使用CDN
  const _ = require('lodash');
  const objA = { a: 1, b: { c: 2 } };
  const objB = { b: { c: 2 }, a: 1 };
  const objC = { a: 1, b: { c: 3 } };
  console.log(_.isEqual(objA, objB)); // true
  console.log(_.isEqual(objA, objC)); // false

• Deep-Equal: deep-equal 这是一个更轻量级的专门用于深度比较的库。

  // 安装: npm install deep-equal
  const equal = require('deep-equal');
  const objA = [1, { a: 2 }];
  const objB = [1, { a: 2 }];
  console.log(equal(objA, objB)); // true

特殊场景：浅层比较

如果你的JSON对象结构不深,或者你只关心对象顶层属性的变化，可以使用浅层比较。

const user1 = { id: 1, name: 'Tom' };
const user2 = { id: 1, name: 'Tom' };
const user3 = { ...user1, role: 'admin' }; // 添加了一个新属性
// 手动实现浅层比较
function shallowEqual(a, b) {
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  if (keysA.length !== keysB.length) {
    return false;
  }
  for (const key of keysA) {
    if (a[key] !== b[key]) {
      return false;
    }
  }
  return true;
}
// 或者使用 Lodash 的 _.isEqualWith 并自定义比较器
function customShallowEqual(a, b) {
  return _.isEqualWith(a, b, (valA, valB) => {
    // 如果是顶层属性，使用严格相等
    // (这个例子只是展示，实际上浅层比较通常不这么用)
    // 更常见的场景是React的shouldComponentUpdate中的浅比较
  });
}
console.log(shallowEqual(user1, user2)); // true
console.log(shallowEqual(user1, user3)); // false (因为属性数量不同)

适用场景：React中的 shouldComponentUpdate 优化、Vuex或Redux中的 mapStateToProps 优化，当状态是一个大型对象但只有顶层属性可能变化时，浅层比较性能更高。

总结与最佳实践

| 方法 | 原理 | 优点 | 缺点 | 适用