迹忆客 专注技术分享

要比较 TypeScript 中的对象：

1. 使用 JSON.stringify() 比较键顺序相同的对象。
2. 如果对象没有嵌套，请进行浅比较。
3. 使用 lodash.isEqual 测试对象的深度相等性。

当两个对象中键的顺序相同时，可以使用 JSON.stringify 方法来比较对象。

type Person = {
  name: string;
  age: number;
};

const obj1: Person = {
  name: 'Tom',
  age: 30,
};

const obj2: Person = {
  name: 'Tom',
  age: 30,
};

if (JSON.stringify(obj1) === JSON.stringify(obj2)) {
  console.log('✅ objects are equal');
} else {
  console.log('⛔️ objects are NOT equal');
}

我们使用 JSON.stringify 方法将对象转换为字符串并比较结果。

请注意，仅当两个对象中键的顺序相同时才应使用此方法。 例如，以下比较返回 false。

// 👇️ false
console.log(
  JSON.stringify({ age: 30, name: 'Tom' }) ===
  JSON.stringify({ name: 'Tom', age: 30 })
);

如果我们的对象仅包含我们预先知道的几个键值对，请使用逻辑 AND && 运算符并比较键值对。

type Person = {
  name: string;
  age: number;
  country: string;
};

const obj1: Person = {
  country: 'Chile',
  name: 'Tom',
  age: 30,
};

const obj2: Person = {
  age: 30,
  name: 'Tom',
  country: 'Chile',
};

let areEqual = false;

if (
  obj1.name === obj2.name &&
  obj1.age === obj2.age &&
  obj1.country === obj2.country
) {
  areEqual = true;
}

console.log(areEqual); // 👉️ true

示例中的对象只有几个键值对，我们可以在 if 语句中手动比较它们而不会使事情变得过于复杂。

TypeScript 中对象的浅比较

如果你的对象没有嵌套属性，你可以做一个相对简单的浅比较。

type Person = {
  name: string;
  age: number;
};

const obj1: Person = {
  name: 'Tom',
  age: 30,
};

const obj2: Person = {
  age: 30,
  name: 'Tom',
};

// ✅ Shallow comparison
const shallowComparison =
  Object.keys(obj1).length === Object.keys(obj2).length &&
  (Object.keys(obj1) as (keyof typeof obj1)[]).every((key) => {
    return (
      Object.prototype.hasOwnProperty.call(obj2, key) && obj1[key] === obj2[key]
    );
  });

console.log(shallowComparison); // 👉️ true

我们在浅层比较中做的第一件事是使用 Object.keys 方法获取两个对象的键数组，并检查两个对象是否具有相同数量的键值对。

如果两个对象的键值对计数不相同，则对象不相等。

我们所做的第二个比较是 - 检查第一个对象中的每个键是否存在于第二个对象中。

在键入 Object.keys() 方法的结果时，我们必须使用类型断言，因为 TypeScript 将类型设置为 string[]，并且我们需要数组的类型仅包含对象的键。

我们需要检查的最后一件事是两个对象中的相同键是否返回相同的值。

如果至少一次不满足条件，every 方法将返回 false。

否则，every 方法返回 true，我们可以断定浅相等检查通过。

TypeScript 中对象的深度比较

在 TypeScript 中对对象进行深度比较的最简单方法是安装和使用 lodash.iseQual 库。

在项目的根目录中打开终端并使用以下 2 个命令安装 lodash：

$ npm i lodash.isequal

$ npm i --save-dev @types/lodash.isequal

现在我们可以使用该库来测试对象的深度相等性。

import isEqual from 'lodash.isequal';

type Person = {
  name: string;
  age: number;
  address: {
    country: string;
    city: string;
  };
};

const obj1: Person = {
  name: 'Tom',
  age: 30,
  address: {
    country: 'Chile',
    city: 'Santiago',
  },
};

const obj2: Person = {
  address: {
    country: 'Chile',
    city: 'Santiago',
  },
  age: 30,
  name: 'Tom',
};

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

isEqual 方法在传入的值之间执行深度比较并返回一个布尔结果 - 如果它们相等，则返回 true，否则返回 false。

该方法支持比较对象、数组、Maps、Date对象、Sets等。

当我们必须对对象进行深度比较时，这是首选方法，因为实现解决此问题的功能相对复杂。