当equal函数遇到对象：javascript的陷阱和解决方案

2024-02-02 06:27:02

JavaScript的==和===运算符对于初学者来说可能令人生畏。虽然==运算符通常用于比较值，但当涉及到对象时，它可能会产生令人惊讶的结果。

== 和 === 的陷阱

==运算符执行类型转换，将操作数转换为共同的类型，然后进行比较。对于数字，这通常有效，但对于对象却不是这样。

const obj1 = {};
const obj2 = {};

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

在这种情况下，==运算符将obj1和obj2隐式转换为布尔值，它们都是假值，因此返回true。

另一方面，===运算符执行严格比较，即检查操作数的类型和值是否相同。

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

严格比较不会执行类型转换，因此obj1和obj2虽然值相等，但类型不同，因此返回false。

对象相等性的解决方案

为了可靠地比较对象，有几种解决方案：

Object.is()： JavaScript ES6中引入的方法，用于比较对象的相等性，即使它们不是严格相等。

console.log(Object.is(obj1, obj2)); // false

lodash isEqual()： Lodash库中的函数，用于比较对象的深度相等性，包括嵌套属性。

const lodash = require('lodash');
console.log(lodash.isEqual(obj1, obj2)); // false

自定义比较函数： 创建自己的比较函数来递归遍历对象的属性并比较它们。

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

  if (obj1 == null || obj2 == null) {
    return false;
  }

  if (Object.keys(obj1).length !== Object.keys(obj2).length) {
    return false;
  }

  for (const key in obj1) {
    if (!deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

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