首页 > web前端 > js教程 > 正文

js怎么比较两个对象是否相等

小老鼠
发布: 2025-08-08 08:56:01
原创
817人浏览过

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

js怎么比较两个对象是否相等

JavaScript中直接使用

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

js怎么比较两个对象是否相等

解决方案

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

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

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

js怎么比较两个对象是否相等
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
登录后复制
登录后复制
登录后复制
登录后复制

js怎么比较两个对象是否相等

而对象(包括普通对象、数组、函数、日期、正则表达式等)都属于引用类型。它们的值并不是直接存储在变量里,变量里存储的只是一个指向内存中实际数据位置的“引用”或者说“地址”。所以,当你用

==
登录后复制
登录后复制
登录后复制
登录后复制
===
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
比较两个对象时,它们比较的不是对象内部的内容,而是这两个变量存储的引用地址是否相同。

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

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怎么比较两个对象是否相等的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号