在JavaScript中，判断两个对象是否相等并非像基本类型那样简单，直接使用`==`或`===`比较的是对象的引用地址，而非内容。要实现对象内容的深度比较，需要递归地检查对象的每一个属性。本文详细介绍了如何编写一个健壮的`deepEqual`函数，该函数能够处理基本类型、`NaN`、`null`、`undefined`，以及包括`Date`、`RegExp`、数组和普通对象等复杂类型。此外，还讨论了浅层比较及其局限性，并强调了深度比较中需要注意的循环引用问题。通过学习本文，开发者可以掌握JavaScript对象比较的核心技巧，并能根据实际需求选择合适的比较策略，确保代码的准确性和性能。

JavaScript中不能直接用==或===比较对象内容是否相等，因为它们仅检查引用地址是否相同；要实现内容相等比较，需进行深度比较，具体步骤包括：1. 使用===检查严格相等，处理基本类型和同一引用的情况；2. 特殊处理NaN，通过isNaN()判断两个NaN相等；3. 确保两者均为非null对象且类型一致；4. 比较构造函数，确保如Date、RegExp等特殊对象类型匹配；5. 对Date对象比较getTime()值；6. 对RegExp对象比较source和flags；7. 数组需先比较长度，再递归比较每个元素；8. 普通对象比较属性数量，并遍历每个属性递归比较值；该方法可准确判断对象内容是否相等，但需注意循环引用可能导致栈溢出，完整实现应增加已访问对象集合来避免。

JavaScript中直接使用==或===比较两个对象时，它们只会检查这两个变量是否指向内存中的同一个对象引用，而不是比较它们内部包含的数据是否一致。因此，要判断两个对象的内容是否相等，我们需要遍历它们的属性，进行逐一比对。

解决方案

判断JavaScript对象内容是否相等，核心在于递归地比较它们的每一个属性。这比听起来要复杂一些，因为对象内部可能嵌套着其他对象、数组，甚至是一些特殊类型如日期或正则表达式。我个人觉得，一个健壮的比较函数需要考虑以下几个方面：

1. 基本类型（Primitives）的比较：数字、字符串、布尔值、null、undefined和Symbol，直接用===即可。需要注意的是NaN，NaN === NaN是false，所以需要特殊处理。
2. 引用类型（Objects/Arrays）的比较：
   • 引用地址相同：如果两个变量指向同一个对象，那它们当然相等。
   • 类型检查：确保两者都是对象，并且是相同类型（例如，都是数组，或都是普通对象，或都是日期对象）。
   • 属性数量：如果属性数量不同，那它们肯定不相等。
   • 递归比较属性值：遍历一个对象的所有属性，并递归地比较其对应的值。如果值是基本类型，直接比较；如果是引用类型，则再次进入递归。
   • 特殊对象处理：Date对象需要比较它们的getTime()值；RegExp对象需要比较它们的source和flags。
   • 数组比较：先比较长度，然后逐个元素进行递归比较。

这是一个实现深度比较的JavaScript函数，它尝试覆盖了大部分常见场景：

function deepEqual(obj1, obj2) {
    // 1. 严格相等检查：处理基本类型、null、undefined、以及指向同一内存地址的对象
    if (obj1 === obj2) {
        return true;
    }

    // 2. 处理 NaN 的特殊情况
    if (typeof obj1 === 'number' && typeof obj2 === 'number' && isNaN(obj1) && isNaN(obj2)) {
        return true;
    }

    // 3. 检查是否都是对象且非 null
    if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
        return false;
    }

    // 4. 检查构造函数是否一致，确保类型相同 (例如，都是Date对象，而不是一个Date一个普通Object)
    if (obj1.constructor !== obj2.constructor) {
        return false;
    }

    // 5. 特殊对象类型处理
    // Date 对象比较
    if (obj1 instanceof Date) {
        return obj1.getTime() === obj2.getTime();
    }
    // RegExp 对象比较
    if (obj1 instanceof RegExp) {
        return obj1.source === obj2.source && obj1.flags === obj2.flags;
    }

    // 6. 数组比较
    if (Array.isArray(obj1)) {
        if (obj1.length !== obj2.length) {
            return false;
        }
        for (let i = 0; i < obj1.length; i++) {
            if (!deepEqual(obj1[i], obj2[i])) {
                return false;
            }
        }
        return true;
    }

    // 7. 普通对象比较
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);

    if (keys1.length !== keys2.length) {
        return false;
    }

    for (let i = 0; i < keys1.length; i++) {
        const key = keys1[i];
        // 确保 obj2 也有这个 key，并且对应的值也深度相等
        if (!Object.prototype.hasOwnProperty.call(obj2, key) || !deepEqual(obj1[key], obj2[key])) {
            return false;
        }
    }

    return true;
}

// 示例用法
// const objA = { a: 1, b: { c: 2 }, d: [3, { e: 4 }], f: new Date('2023-01-01'), g: /abc/i, h: NaN };
// const objB = { a: 1, b: { c: 2 }, d: [3, { e: 4 }], f: new Date('2023-01-01'), g: /abc/i, h: NaN };
// const objC = { a: 1, b: { c: 99 } };

// console.log(deepEqual(objA, objB)); // true
// console.log(deepEqual(objA, objC)); // false
// console.log(deepEqual({x: NaN}, {x: NaN})); // true
// console.log(deepEqual(new Date('2023-01-01'), new Date('2023-01-01'))); // true

为什么JavaScript对象不能直接用==或===比较？

这其实是个老生常谈的问题，但每次遇到还是得琢磨一下。JavaScript的数据类型大致可以分为两类：基本类型（Primitive Types）和引用类型（Reference Types）。

基本类型包括：string、number、boolean、null、undefined、symbol 和 bigint。当你比较两个基本类型的值时，==或===会直接比较它们的值。比如 1 === 1 是 true，'hello' === 'hello' 也是 true。

而对象（包括普通对象、数组、函数、日期、正则表达式等）都属于引用类型。它们的值并不是直接存储在变量里，变量里存储的只是一个指向内存中实际数据位置的“引用”或者说“地址”。所以，当你用==或===比较两个对象时，它们比较的不是对象内部的内容，而是这两个变量存储的引用地址是否相同。

举个例子，你可能会觉得下面这段代码会输出true：

const obj1 = { name: 'Alice' };
const obj2 = { name: 'Alice' };

console.log(obj1 === obj2); // 结果是 false

尽管obj1和obj2看起来内容一模一样，但它们在内存中是两个独立的、不同的对象实例，因此它们的引用地址是不同的。这就好比你有两张一模一样的A4纸，上面写的内容完全一样，但它们毕竟是两张独立的纸，不是同一张。obj1 === obj2就相当于在问：“这两张纸是同一张纸吗？”答案自然是“不是”。

实现一个基础的浅层对象比较函数

有时候，我们并不需要那么复杂的深度比较，只需要检查对象的第一层属性是否相等就够了。这被称为“浅层比较”（Shallow Comparison）。浅层比较通常用于优化性能，或者在确定对象结构不会有深层嵌套时。

一个基础的浅层比较函数通常会做以下几件事：

1. 检查两个对象是否是同一个引用（obj1 === obj2）。
2. 检查它们是否都是非null的对象类型。
3. 获取两个对象的所有属性名。
4. 比较属性名的数量是否一致。
5. 遍历其中一个对象的属性名，检查另一个对象是否也拥有相同的属性名，并且对应属性的值是严格相等的（===）。

这是一个简单的浅层比较实现：

function shallowEqual(objA, objB) {
    // 如果是同一个引用，或者都是基本类型且值相等，直接返回 true
    if (objA === objB) {
        return true;
    }

    // 如果其中一个不是对象或者为 null，那它们不相等（因为前面已经排除了 objA === objB 的情况）
    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
        return false;
    }

    const keysA = Object.keys(objA);
    const keysB = Object.keys(objB);

    // 属性数量不一致，肯定不相等
    if (keysA.length !== keysB.length) {
        return false;
    }

    // 遍历属性，检查值是否严格相等
    for (let i = 0; i < keysA.length; i++) {
        const key = keysA[i];
        // 确保 objB 也有此属性，且值严格相等
        if (!Object.prototype.hasOwnProperty.call(objB, key) || objA[key] !== objB[key]) {
            return false;
        }
    }

    return true;
}

// 示例
// const data1 = { name: 'Bob', age: 30 };
// const data2 = { name: 'Bob', age: 30 };
// const data3 = { name: 'Bob', age: 30, city: 'NY' };
// const data4 = { name: 'Bob', details: { id: 1 } };
// const data5 = { name: 'Bob', details: { id: 1 } }; // 注意这里，details 是嵌套对象，浅比较会失败

// console.log(shallowEqual(data1, data2)); // true
// console.log(shallowEqual(data1, data3)); // false (属性数量不同)
// console.log(shallowEqual(data4, data5)); // false (因为 {id: 1} !== {id: 1}，引用不同)

浅层比较的局限性在于，它无法处理嵌套的对象或数组。如果一个属性的值本身又是一个对象，那么浅层比较只会检查这两个引用是否相同，而不会深入到嵌套对象内部去比较它们的内容。这在上面data4和data5的例子中体现得很明显。

如何进行深度对象比较，处理嵌套结构和特殊类型？

深度对象比较（Deep Comparison），顾名思义，就是递归地深入到对象的每一个层级，比较所有嵌套的属性和元素，直到所有的基本类型值都匹配为止。这在很多场景下都非常有用，比如测试框架中比较期望结果和实际结果，或者在React/Vue等框架中判断组件的props或state是否真正发生了变化以避免不必要的渲染。

实现一个完善的深度比较函数，需要处理的细节远不止普通的键值对。我个人在写这种函数时，会特别注意以下几点：

1. 递归是核心：当遇到属性值是对象或数组时，必须再次调用比较函数本身。这是深度比较的精髓所在。
2. 处理各种数据类型：
   • 基本类型：直接用===。但别忘了NaN的特殊性，NaN === NaN是false，所以需要isNaN(a) && isNaN(b)来判断。
   • null和undefined：它们是基本类型，但又是特殊的“空”值，通常在对象检查前就处理掉。
   • 数组：比较它们的length，然后逐个索引进行递归比较。数组元素的顺序很重要。
   • 日期对象 (Date)：不能直接比较，需要比较它们的getTime()方法返回的毫秒数。
   • 正则表达式 (RegExp)：比较它们的source（正则表达式的字符串形式）和flags（如'i'、'g'等）。
   • 函数 (Function)：通常情况下，两个不同的函数实例即使代码相同，也被认为是不同的。深度比较一般不比较函数内容，直接认为不相等，或者跳过比较。在我的实现里，如果函数作为属性值，它们引用不同就会被判为不相等。
   • Symbol：作为属性名或属性值，按基本类型处理。
3. 循环引用（Circular References）：这是一个比较高级但也非常棘手的问题。如果对象A的某个属性引用了对象B，而对象B的某个属性又引用了对象A，就会形成一个循环。如果不处理，递归比较会陷入无限循环，导致栈溢出。通常的解决方案是维护一个已访问过的对象对（[obj1, obj2]）的集合，在每次递归前检查当前要比较的两个对象是否已经在集合中，如果在，则直接返回true（因为它们已经在之前的路径中被判定为相等并访问过了），避免重复比较。不过，对于大多数日常使用场景，如果确定数据结构不会有循环引用，可以暂时不考虑这个复杂性。我上面提供的deepEqual函数没有直接处理循环引用，在存在循环引用的情况下会栈溢出。

理解这些细节，能够帮助我们写出更鲁棒、更符合实际需求的比较函数。当然，在实际项目中，很多时候会直接使用像Lodash的_.isEqual这样的成熟库函数，它们已经处理了绝大多数的复杂情况，包括循环引用等。但理解其背后的原理，对于我们解决问题和调试代码仍然至关重要。

好了，本文到此结束，带大家了解了《JS判断两个对象是否相等的方法有哪些？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！