JavaScript中的对象相等：引用与值的微妙之处

在JavaScript的世界里，对象是一个复杂而灵活的存在。它们可以包含各种属性和方法，甚至可以嵌套其他对象。然而，当我们想要判断两个对象是否“相等”时，事情就变得不那么简单了。今天，我想聊聊JavaScript中对象相等的那些事儿。

---

1. 引用相等：它们真的是同一个对象吗？

在JavaScript中，对象是通过引用存储的。这意味着，当你创建一个对象并将其赋值给一个变量时，这个变量实际上存储的是对象在内存中的地址，而不是对象本身。因此，判断两个对象是否“相等”的最简单方式就是检查它们是否指向同一个内存地址。

const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

在这个例子中，obj1和obj2虽然内容相同，但它们是两个不同的对象，存储在不同的内存地址中。而obj1和obj3则指向同一个对象，因此它们是相等的。

总结：如果你想判断两个变量是否指向同一个对象，使用 === 或 == 就足够了。

---

2. 值相等：它们的内容相同吗？

然而，很多时候我们关心的并不是两个对象是否是同一个引用，而是它们的内容是否相同。比如，我们可能有两个不同的对象，但它们的所有属性和值都完全一致。这种情况下，我们需要进行“值相等”的判断。

2.1 浅比较：只比较第一层

浅比较是一种简单的方式，它只比较对象的第一层属性。如果对象的属性值是基本类型（如数字、字符串、布尔值），浅比较可以很好地工作。

function shallowEqual(obj1, obj2) {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    if (obj1[key] !== obj2[key]) {
      return false;
    }
  }

  return true;
}

const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
const obj3 = { a: 1, b: 3 };

console.log(shallowEqual(obj1, obj2)); // true
console.log(shallowEqual(obj1, obj3)); // false

在这个例子中，obj1和obj2的内容相同，因此浅比较返回 true。而obj1和obj3的内容不同，浅比较返回 false。

注意：浅比较无法处理嵌套对象。如果对象的属性值仍然是对象，浅比较会失效。

2.2 深比较：递归比较所有层级

深比较是一种更复杂的方式，它会递归地比较对象的所有嵌套属性。这意味着，无论对象的结构有多复杂，深比较都能准确地判断它们的内容是否相同。

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;

  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (let key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(deepEqual(obj1, obj2)); // true
console.log(deepEqual(obj1, obj3)); // false

在这个例子中，obj1和obj2的内容完全相同，包括嵌套的对象 { c: 2 }，因此深比较返回 true。而obj1和obj3的嵌套对象不同，深比较返回 false。

总结：如果你需要比较复杂的对象，深比较是更可靠的选择。

---

3. 使用第三方库：让生活更简单

手动实现深比较可能会有些繁琐，尤其是在处理非常复杂的对象时。幸运的是，有一些优秀的第三方库可以帮助我们简化这个过程。比如，Lodash 提供了一个非常方便的 _.isEqual 方法。

const _ = require('lodash');

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(_.isEqual(obj1, obj2)); // true
console.log(_.isEqual(obj1, obj3)); // false

使用 Lodash，我们只需要一行代码就能完成深比较，既方便又高效。

---

4. 总结

在JavaScript中，判断两个对象是否相等并不是一件简单的事情。我们需要根据具体的需求选择合适的比较方式：

• 引用相等：使用 === 或 ==，适用于判断两个变量是否指向同一个对象。
• 值相等：手动实现浅比较或深比较，或者使用第三方库如 Lodash，适用于判断两个对象的内容是否相同。

无论是浅比较还是深比较，理解它们的原理和适用场景，都能帮助我们在开发中更加得心应手。希望这篇随笔能对你有所帮助，下次再遇到对象相等的问题时，不妨试试这些方法吧！