JS判断两个对象内容是否相等的方法示例

下面我将详细讲解如何判断两个JavaScript对象的内容是否相等。

1.场景分析

在开发过程中，经常需要判断两个对象的内容是否相等。例如，在使用Vue等MVVM框架时，需要比较当前数据和原始数据是否相等，以便判断是否需要提交更改。此时，判断两个对象内容是否相等就很有必要了。

2.方法一：JSON序列化

一种常用的判断两个对象内容是否相等的方法是使用JSON序列化。该方法的步骤如下：

1. 将两个对象分别进行JSON序列化，得到两个字符串；
2. 比较这两个字符串是否相等。

示例代码如下：

function isEqual(obj1, obj2) {
  const str1 = JSON.stringify(obj1);
  const str2 = JSON.stringify(obj2);
  return str1 === str2;
}

const obj1 = { name: 'Tom', age: 18 };
const obj2 = { age: 18, name: 'Tom' };

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

上面的代码中，isEqual函数就是判断两个对象内容是否相等的方法。它接受两个参数：obj1和obj2，表示要比较的两个对象。

在isEqual函数内部，首先将obj1和obj2分别使用JSON.stringify方法进行序列化。然后，将序列化后的两个字符串进行比较。如果相等，就说明两个对象的内容相等；如果不相等，则说明两个对象的内容不相等。

在上面的示例中，我们两个对象obj1和obj2的内容是相等的。尽管它们的属性顺序不一样，但由于我们使用了JSON.stringify方法，序列化得到的字符串是一样的，所以isEqual函数返回了true。

需要注意的是，该方法存在一些限制。例如，对象内部如果包含了函数或RegExp等非JSON安全的数据类型，使用JSON.stringify方法进行序列化时，会将其忽略掉。此时，该方法判断两个对象是否相等就会出现问题。

3.方法二：递归遍历

为了解决上面方法一中存在的限制，我们可以使用递归遍历的方式来判断两个对象内容是否相等。递归遍历方法的步骤如下：

1. 判断obj1和obj2的类型是否相同，如果不相同，则说明两个对象内容不相等；
2. 如果obj1和obj2的类型均为对象，则分别遍历它们的属性，依次进行判断；
3. 如果obj1和obj2的类型为基本类型，则直接比较它们的值是否相等。

示例代码如下：

function isEqual(obj1, obj2) {
  if (typeof obj1 !== typeof obj2) {
    return false;
  }
  if (typeof obj1 === 'object') {
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);
    if (keys1.length !== keys2.length) {
      return false;
    }
    for (const key of keys1) {
      if (!isEqual(obj1[key], obj2[key])) {
        return false;
      }
    }
    return true;
  } else {
    return obj1 === obj2;
  }
}

const obj1 = { name: 'Tom', age: 18 };
const obj2 = { age: 18, name: 'Tom' };

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

上面的代码中，isEqual函数使用递归遍历的方式来判断两个对象内容是否相等。

首先，我们判断obj1和obj2的类型是否相同。如果不相同，则说明两个对象内容不相等。如果相同，则继续执行下去。

其次，如果obj1和obj2的类型均为对象，则分别遍历它们的属性，依次进行判断。在遍历时，我们首先获取obj1和obj2的所有属性键名，然后判断两个键名数组的长度是否相同。如果不相同，则说明两个对象内容不相等。如果长度相同，则依次遍历对应键名的键值，递归调用isEqual函数来进行比较。

最后，如果obj1和obj2的类型为基本类型，则直接比较它们的值是否相等。

在上面的示例中，我们两个对象obj1和obj2的内容是相等的。无论它们的属性顺序如何，只要属性名称和属性值相同，函数都会返回true。