如何判断两个对象相等？

在前端开发中，判断两个对象是否相等是一个常见的问题，但它比判断原始类型（如数字、字符串、布尔值）要复杂一些。 "相等" 的含义也取决于你的具体需求：你是要判断它们的值是否相等（浅比较和深比较），还是判断它们是否指向同一个内存地址（严格相等）。

以下是几种常用的方法：

1. 严格相等 (===)

• 原理: === 运算符比较两个对象的内存地址。如果两个变量指向同一个对象，则返回 true，否则返回 false。
• 适用场景: 判断两个变量是否引用同一个对象。
• 局限性: 无法判断两个不同的对象是否具有相同的值。

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

console.log(obj1 === obj2); // true  (指向同一个对象)
console.log(obj1 === obj3); // false (不同的对象，即使值相同)

2. 浅比较 (Shallow Comparison)

• 原理: 逐个比较对象的自身属性值。如果所有自身属性的值都相等，则认为两个对象相等。
• 适用场景: 当对象结构简单，且你只关心对象自身属性值是否相等时。
• 局限性: 不比较继承的属性，也不进行深层嵌套对象的比较。如果属性值是对象，则只比较它们的引用，而不是它们的值。

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

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;
}

console.log(shallowEqual(obj1, obj2)); // true
console.log(shallowEqual(obj3, obj4)); // false (因为b属性的值是不同的对象)

3. 深比较 (Deep Comparison)

• 原理: 递归地比较所有嵌套对象的属性值。
• 适用场景: 需要比较复杂嵌套对象的完整值时。
• 局限性: 实现较为复杂，性能开销较大，循环引用会导致栈溢出。需要考虑如何处理循环引用以及日期、正则表达式等特殊类型。

可以使用一些库来实现深比较，例如：

• Lodash 的 _.isEqual: 一个功能强大且经过良好测试的深比较函数。
• Underscore.js 的 _.isEqual: 类似于 Lodash 的 _.isEqual。
• fast-deep-equal: 一个专注于性能的深比较库。

import isEqual from 'lodash.isequal'; // 使用 Lodash

const obj3 = { a: 1, b: { c: 3 } };
const obj4 = { a: 1, b: { c: 3 } };

console.log(isEqual(obj3, obj4)); // true (Lodash 的深比较)

选择哪种方法？

选择哪种方法取决于你的具体需求：

• 比较对象引用：使用 ===。
• 比较简单对象的自身属性值：使用浅比较或手动实现一个简单的浅比较函数。
• 比较复杂嵌套对象的完整值：使用 Lodash 的 _.isEqual 或其他深比较库。

记住，深比较的性能开销较大，因此在处理大型对象或频繁比较时，需要权衡性能和准确性。 如果可能，尽量简化对象结构或使用浅比较来提高性能。