深入比较两个对象 - TypeScript

在编程中，我们经常需要比较两个对象。在 JavaScript 和 TypeScript 中比较两个对象需要注意一些细节。本文将会深入比较两个对象的方法，一起来看看吧！

为什么需要深入比较两个对象？

当我们比较两个对象时，常使用 == 或 === 运算符，但是这两种运算符只比较了对象的引用，而没有比较对象的内容。所以，当我们需要比较两个对象的内容时，就需要深入比较。

深入比较两个对象的方法

JSON.stringify

我们可以使用 JSON.stringify 方法将对象转换为字符串，然后比较两个字符串。这种方法的前提是需要比较的对象是可序列化的，如果对象中包含函数等不可序列化的内容，就无法使用该方法进行比较。

const obj1 = {
  name: 'Alice',
  age: 20,
};
const obj2 = {
  name: 'Bob',
  age: 20,
};
JSON.stringify(obj1) === JSON.stringify(obj2); // false

lodash isEqual

lodash 是一个工具库，其中有一个 isEqual 方法可以深度比较两个对象。这种方法可以比较不可序列化的内容，如函数、Date、正则表达式等。

import { isEqual } from 'lodash';

const obj1 = {
  name: 'Alice',
  age: 20,
  birthday: new Date(),
  favorites: {
    color: 'red',
    music: ['pop', 'rock'],
    show: {
      name: 'Game of Thrones',
      episode: 1,
    },
  },
  sayHi: () => {
    console.log('Hi!');
  },
};
const obj2 = {
  name: 'Bob',
  age: 20,
  birthday: new Date(),
  favorites: {
    color: 'red',
    music: ['pop', 'rock'],
    show: {
      name: 'Game of Thrones',
      episode: 1,
    },
  },
  sayHi: () => {
    console.log('Hi!');
  },
};
isEqual(obj1, obj2); // true

深度遍历 + 比较

我们也可以自己实现深度遍历，递归比较两个对象。这种方法比较简单，但是需要注意的是，当对象中的属性值是对象时，需要对对象进行递归比较。

function isDeepEqual(obj1: Record<string, any>, obj2: Record<string, any>): boolean {
  if (obj1 === obj2) {
    return true;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) {
    return false;
  }
  for (const key of keys1) {
    if (!keys2.includes(key)) {
      return false;
    }
    const value1 = obj1[key];
    const value2 = obj2[key];
    if (isObject(value1) && isObject(value2)) {
      if (!isDeepEqual(value1, value2)) {
        return false;
      }
    } else if (value1 !== value2) {
      return false;
    }
  }
  return true;
}

function isObject(value: any): boolean {
  return value !== null && typeof value === 'object';
}

const obj1 = {
  name: 'Alice',
  age: 20,
  birthday: new Date(),
  favorites: {
    color: 'red',
    music: ['pop', 'rock'],
    show: {
      name: 'Game of Thrones',
      episode: 1,
    },
  },
};
const obj2 = {
  name: 'Bob',
  age: 20,
  birthday: new Date(),
  favorites: {
    color: 'red',
    music: ['pop', 'rock'],
    show: {
      name: 'Game of Thrones',
      episode: 1,
    },
  },
};
isDeepEqual(obj1, obj2); // true

总结

以上就是深入比较两个对象的方法，根据需要选择合适的比较方法。记住，当需要比较对象内容时，不要使用 == 和 === 运算符。