深度相等实现
2025年3月7日大约 11 分钟
深度相等实现
对于对象和数组等复合类型，简单的相等操作符无法判断其内容是否相等。本文将介绍如何实现深度相等比较算法，处理循环引用、不同类型的值以及特殊对象如Map、Set和Date等。
为什么需要深度相等
在JavaScript中，==和===操作符以及Object.is()方法都只能进行浅层比较：
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
console.log(obj1 === obj2); // false
console.log(Object.is(obj1, obj2)); // false这是因为这些操作符只比较对象的引用，而不比较它们的内容。当我们需要比较两个对象的结构和值是否相同时，就需要实现深度相等比较。
基本实现思路
深度相等比较的基本思路是递归地比较两个值的每个属性：
- 如果两个值是原始类型，使用
Object.is()进行比较 - 如果两个值是不同类型，返回
false - 如果两个值都是对象（包括数组），递归比较它们的每个属性
- 处理特殊情况，如
Date、RegExp、Map、Set等
简单版本的深度相等实现
下面是一个基本的深度相等比较函数实现：
function isDeepEqual(value1, value2) {
// 处理原始类型和引用相等
if (Object.is(value1, value2)) {
return true;
}
// 如果其中一个是原始类型，另一个是对象，则不相等
if (typeof value1 !== 'object' || value1 === null ||
typeof value2 !== 'object' || value2 === null) {
return false;
}
// 如果两个值是不同的类型，则不相等
if (Object.prototype.toString.call(value1) !== Object.prototype.toString.call(value2)) {
return false;
}
// 处理数组
if (Array.isArray(value1)) {
if (value1.length !== value2.length) {
return false;
}
for (let i = 0; i < value1.length; i++) {
if (!isDeepEqual(value1[i], value2[i])) {
return false;
}
}
return true;
}
// 处理普通对象
const keys1 = Object.keys(value1);
const keys2 = Object.keys(value2);
if (keys1.length !== keys2.length) {
return false;
}
for (const key of keys1) {
if (!keys2.includes(key) || !isDeepEqual(value1[key], value2[key])) {
return false;
}
}
return true;
}处理特殊对象
上面的实现只处理了普通对象和数组，但JavaScript中还有许多特殊对象类型需要特殊处理：
Date对象
// 在isDeepEqual函数中添加Date处理
if (value1 instanceof Date && value2 instanceof Date) {
return value1.getTime() === value2.getTime();
}RegExp对象
// 在isDeepEqual函数中添加RegExp处理
if (value1 instanceof RegExp && value2 instanceof RegExp) {
return value1.toString() === value2.toString();
}Map对象
// 在isDeepEqual函数中添加Map处理
if (value1 instanceof Map && value2 instanceof Map) {
if (value1.size !== value2.size) {
return false;
}
for (const [key, val] of value1) {
// 检查key是否存在
if (!value2.has(key)) {
return false;
}
// 递归比较值
if (!isDeepEqual(val, value2.get(key))) {
return false;
}
}
return true;
}Set对象
// 在isDeepEqual函数中添加Set处理
if (value1 instanceof Set && value2 instanceof Set) {
if (value1.size !== value2.size) {
return false;
}
// 将Set转换为数组并排序后比较
const arr1 = Array.from(value1);
const arr2 = Array.from(value2);
return isDeepEqual(arr1, arr2);
}处理循环引用
上面的实现在处理循环引用时会导致无限递归和栈溢出。为了解决这个问题，我们需要使用一个映射来跟踪已经比较过的对象：
function isDeepEqual(value1, value2, visited = new Map()) {
// 处理原始类型和引用相等
if (Object.is(value1, value2)) {
return true;
}
// 如果其中一个是原始类型，另一个是对象，则不相等
if (typeof value1 !== 'object' || value1 === null ||
typeof value2 !== 'object' || value2 === null) {
return false;
}
// 检查是否已经比较过这对对象
if (visited.has(value1)) {
return visited.get(value1) === value2;
}
// 记录这对对象
visited.set(value1, value2);
// 其余比较逻辑...
}完整的深度相等实现
下面是一个完整的深度相等比较函数，处理了各种特殊情况：
function isDeepEqual(value1, value2, visited = new Map()) {
// 处理原始类型和引用相等
if (Object.is(value1, value2)) {
return true;
}
// 如果其中一个是原始类型，另一个是对象，则不相等
if (typeof value1 !== 'object' || value1 === null ||
typeof value2 !== 'object' || value2 === null) {
return false;
}
// 检查是否已经比较过这对对象（处理循环引用）
if (visited.has(value1)) {
return visited.get(value1) === value2;
}
// 记录这对对象
visited.set(value1, value2);
// 处理不同的对象类型
const type1 = Object.prototype.toString.call(value1);
const type2 = Object.prototype.toString.call(value2);
if (type1 !== type2) {
return false;
}
// 处理Date对象
if (value1 instanceof Date) {
return value1.getTime() === value2.getTime();
}
// 处理RegExp对象
if (value1 instanceof RegExp) {
return value1.toString() === value2.toString();
}
// 处理Map对象
if (value1 instanceof Map) {
if (value1.size !== value2.size) {
return false;
}
for (const [key, val] of value1) {
// 检查key是否存在
if (!value2.has(key)) {
return false;
}
// 递归比较值
if (!isDeepEqual(val, value2.get(key), visited)) {
return false;
}
}
return true;
}
// 处理Set对象
if (value1 instanceof Set) {
if (value1.size !== value2.size) {
return false;
}
// 将Set转换为数组并比较
// 注意：这种方法假设Set中的元素可以通过isDeepEqual比较
const arr1 = Array.from(value1);
const arr2 = Array.from(value2);
// 对于简单类型的Set，可以先排序再比较
if (arr1.every(item => typeof item !== 'object' || item === null)) {
arr1.sort();
arr2.sort();
}
return isDeepEqual(arr1, arr2, visited);
}
// 处理数组
if (Array.isArray(value1)) {
if (value1.length !== value2.length) {
return false;
}
for (let i = 0; i < value1.length; i++) {
if (!isDeepEqual(value1[i], value2[i], visited)) {
return false;
}
}
return true;
}
// 处理普通对象
const keys1 = Object.keys(value1);
const keys2 = Object.keys(value2);
if (keys1.length !== keys2.length) {
return false;
}
// 检查所有键是否存在并且值相等
for (const key of keys1) {
if (!keys2.includes(key) || !isDeepEqual(value1[key], value2[key], visited)) {
return false;
}
}
return true;
}使用示例
// 基本类型
console.log(isDeepEqual(1, 1)); // true
console.log(isDeepEqual('hello', 'hello')); // true
console.log(isDeepEqual(NaN, NaN)); // true
console.log(isDeepEqual(1, '1')); // false
// 数组
console.log(isDeepEqual([1, 2, 3], [1, 2, 3])); // true
console.log(isDeepEqual([1, 2, 3], [1, 3, 2])); // false
console.log(isDeepEqual([1, [2, 3]], [1, [2, 3]])); // true
// 对象
console.log(isDeepEqual({ a: 1, b: 2 }, { a: 1, b: 2 })); // true
console.log(isDeepEqual({ a: 1, b: 2 }, { b: 2, a: 1 })); // true
console.log(isDeepEqual({ a: 1, b: { c: 3 } }, { a: 1, b: { c: 3 } })); // true
// 特殊对象
console.log(isDeepEqual(new Date('2023-01-01'), new Date('2023-01-01'))); // true
console.log(isDeepEqual(/abc/g, /abc/g)); // true
console.log(isDeepEqual(new Map([['a', 1], ['b', 2]]), new Map([['a', 1], ['b', 2]]))); // true
console.log(isDeepEqual(new Set([1, 2, 3]), new Set([1, 2, 3]))); // true
// 循环引用
const obj1 = { a: 1 };
const obj2 = { a: 1 };
obj1.self = obj1;
obj2.self = obj2;
console.log(isDeepEqual(obj1, obj2)); // true性能优化
深度相等比较可能会很耗费性能，特别是对于大型嵌套对象。以下是一些优化建议：
- 提前比较引用：如果两个值引用相同，直接返回
true - 缓存结果：使用
Map缓存已比较过的对象对 - 限制递归深度：对于非常深的对象，可以设置最大递归深度
- 使用迭代而非递归：在某些情况下，使用迭代可以避免栈溢出
与流行库的比较
许多流行的JavaScript库都提供了深度相等比较功能：
Lodash的_.isEqual
const _ = require('lodash');
console.log(_.isEqual({ a: 1, b: 2 }, { a: 1, b: 2 })); // truefast-deep-equal
const isEqual = require('fast-deep-equal');
console.log(isEqual({ a: 1, b: 2 }, { a: 1, b: 2 })); // trueChai断言库
const chai = require('chai');
const { expect } = chai;
expect({ a: 1, b: 2 }).to.deep.equal({ a: 1, b: 2 }); // 通过常见陷阱和注意事项
- 属性顺序：在标准对象中，属性顺序通常不重要，但在某些情况下可能需要考虑
- 不可枚举属性：默认情况下，
Object.keys()不包括不可枚举属性 - 原型链属性：默认情况下，只比较对象自身的属性，不包括原型链上的属性
- Symbol属性：需要特殊处理Symbol键的属性
- 特殊对象：某些内置对象（如
Error、Promise等）可能需要特殊处理
扩展：处理更多特殊情况
处理Symbol属性
// 在比较对象部分添加Symbol属性处理
const symbolKeys1 = Object.getOwnPropertySymbols(value1);
const symbolKeys2 = Object.getOwnPropertySymbols(value2);
if (symbolKeys1.length !== symbolKeys2.length) {
return false;
}
for (const symKey of symbolKeys1) {
if (!symbolKeys2.includes(symKey) || !isDeepEqual(value1[symKey], value2[symKey], visited)) {
return false;
}
}处理类型化数组
// 在isDeepEqual函数中添加类型化数组处理
if (
ArrayBuffer.isView(value1) &&
!ArrayBuffer.isView(value2) &&
!(value1 instanceof DataView)
) {
if (value1.length !== value2.length || value1.constructor !== value2.constructor) {
return false;
}
for (let i = 0; i < value1.length; i++) {
if (value1[i] !== value2[i]) {
return false;
}
}
return true;
}处理Error对象
// 在isDeepEqual函数中添加Error处理
if (value1 instanceof Error && value2 instanceof Error) {
return value1.name === value2.name &&
value1.message === value2.message &&
value1.stack === value2.stack;
}处理不可枚举属性
// 在比较对象部分添加不可枚举属性处理
const allProps1 = Object.getOwnPropertyNames(value1);
const allProps2 = Object.getOwnPropertyNames(value2);
if (allProps1.length !== allProps2.length) {
return false;
}
for (const prop of allProps1) {
if (!allProps2.includes(prop) || !isDeepEqual(value1[prop], value2[prop], visited)) {
return false;
}
}实际应用场景
1. 深度比较配置对象
在处理配置对象时，我们经常需要比较默认配置和用户配置是否相同：
const defaultConfig = {
theme: 'light',
fontSize: 14,
notifications: {
email: true,
push: false,
frequency: 'daily'
}
};
const userConfig = {
theme: 'light',
fontSize: 14,
notifications: {
email: true,
push: false,
frequency: 'daily'
}
};
// 检查用户是否修改了默认配置
if (isDeepEqual(defaultConfig, userConfig)) {
console.log('用户使用的是默认配置');
} else {
console.log('用户修改了配置');
}2. 状态管理中的变更检测
在React或Vue等框架的状态管理中，深度相等比较可以用于检测状态是否真正发生了变化：
function shouldComponentUpdate(nextProps, nextState) {
// 只有当props或state真正变化时才重新渲染
return !isDeepEqual(this.props, nextProps) || !isDeepEqual(this.state, nextState);
}3. 缓存和记忆化
在实现缓存或记忆化函数时，深度相等比较可以用于检查参数是否相同：
function memoize(fn) {
const cache = new Map();
return function(...args) {
// 查找缓存中是否有相同的参数
for (const [cachedArgs, result] of cache.entries()) {
if (isDeepEqual(cachedArgs, args)) {
return result;
}
}
// 如果没有找到，计算结果并缓存
const result = fn.apply(this, args);
cache.set(args, result);
return result;
};
}
// 使用记忆化函数
const expensiveCalculation = memoize((obj) => {
console.log('执行计算...');
return obj.a + obj.b;
});
console.log(expensiveCalculation({ a: 1, b: 2 })); // 输出: 执行计算... 3
console.log(expensiveCalculation({ a: 1, b: 2 })); // 输出: 3 (使用缓存)4. 测试断言
在编写测试时，深度相等比较可以用于验证函数的输出是否符合预期：
function testFunction(input, expectedOutput) {
const actualOutput = functionUnderTest(input);
if (isDeepEqual(actualOutput, expectedOutput)) {
console.log('测试通过');
} else {
console.error('测试失败', {
input,
expectedOutput,
actualOutput
});
}
}
// 测试一个函数
testFunction(
{ name: 'Alice', age: 30 },
{ greeting: 'Hello, Alice!', details: { age: 30, isAdult: true } }
);高级实现：可配置的深度相等比较
在实际应用中，我们可能需要一个更灵活的深度相等比较函数，允许自定义比较行为：
function createDeepEqualComparer(options = {}) {
const {
// 是否比较不可枚举属性
includeNonEnumerable = false,
// 是否比较Symbol属性
includeSymbols = false,
// 是否比较原型链上的属性
includePrototype = false,
// 最大递归深度，0表示无限制
maxDepth = 0,
// 自定义比较器
customComparers = {}
} = options;
return function isDeepEqual(value1, value2, visited = new Map(), depth = 0) {
// 检查最大递归深度
if (maxDepth > 0 && depth > maxDepth) {
return true;
}
// 基本比较逻辑
if (Object.is(value1, value2)) {
return true;
}
// 类型检查
if (typeof value1 !== 'object' || value1 === null ||
typeof value2 !== 'object' || value2 === null) {
return false;
}
// 循环引用检查
if (visited.has(value1)) {
return visited.get(value1) === value2;
}
visited.set(value1, value2);
// 获取对象的类型
const type1 = Object.prototype.toString.call(value1);
const type2 = Object.prototype.toString.call(value2);
if (type1 !== type2) {
return false;
}
// 使用自定义比较器
const typeName = type1.slice(8, -1); // 从"[object Type]"中提取"Type"
if (customComparers[typeName]) {
return customComparers[typeName](value1, value2, (a, b) =>
isDeepEqual(a, b, visited, depth + 1)
);
}
// 标准对象类型的处理
// ... 这里包含前面实现的各种对象类型处理逻辑 ...
// 获取属性
let keys1 = Object.keys(value1);
let keys2 = Object.keys(value2);
// 包含不可枚举属性
if (includeNonEnumerable) {
keys1 = Object.getOwnPropertyNames(value1);
keys2 = Object.getOwnPropertyNames(value2);
}
// 包含Symbol属性
if (includeSymbols) {
const symbols1 = Object.getOwnPropertySymbols(value1);
const symbols2 = Object.getOwnPropertySymbols(value2);
keys1 = [...keys1, ...symbols1];
keys2 = [...keys2, ...symbols2];
}
// 包含原型链上的属性
if (includePrototype) {
const protoKeys1 = [];
const protoKeys2 = [];
let proto1 = Object.getPrototypeOf(value1);
let proto2 = Object.getPrototypeOf(value2);
while (proto1 !== null) {
protoKeys1.push(...Object.getOwnPropertyNames(proto1));
proto1 = Object.getPrototypeOf(proto1);
}
while (proto2 !== null) {
protoKeys2.push(...Object.getOwnPropertyNames(proto2));
proto2 = Object.getPrototypeOf(proto2);
}
keys1 = [...new Set([...keys1, ...protoKeys1])];
keys2 = [...new Set([...keys2, ...protoKeys2])];
}
// 比较属性数量
if (keys1.length !== keys2.length) {
return false;
}
// 比较每个属性
for (const key of keys1) {
if (!keys2.includes(key)) {
return false;
}
if (!isDeepEqual(value1[key], value2[key], visited, depth + 1)) {
return false;
}
}
return true;
};
}
// 使用示例
const isDeepEqual = createDeepEqualComparer({
includeSymbols: true,
maxDepth: 10,
customComparers: {
// 自定义Date比较器
Date: (a, b) => a.getTime() === b.getTime(),
// 自定义函数比较器（只比较函数字符串）
Function: (a, b) => a.toString() === b.toString()
}
});
// 测试
const sym = Symbol('test');
const obj1 = { a: 1, [sym]: 'symbol' };
const obj2 = { a: 1, [sym]: 'symbol' };
console.log(isDeepEqual(obj1, obj2)); // true，因为includeSymbols为true总结
深度相等比较是JavaScript中一个常见但复杂的问题。本文介绍了如何实现一个全面的深度相等比较函数，处理各种特殊情况：
- 基本类型使用
Object.is()进行比较 - 对象和数组递归比较每个属性或元素
- 特殊对象如
Date、RegExp、Map、Set等需要特殊处理 - 循环引用使用
Map跟踪已比较的对象对 - 性能优化通过缓存结果和限制递归深度来提高性能
在实际应用中，除非有特殊需求，通常建议使用成熟的库（如Lodash的_.isEqual或fast-deep-equal）来进行深度相等比较，这些库经过了广泛测试和性能优化。
然而，理解深度相等比较的原理和实现方法对于深入理解JavaScript中的相等性概念和对象比较机制非常有帮助。