在JS中判断两个对象是否相等方法详解

 更新时间:2023年05月09日 14:23:00   作者:施主来了  
在JavaScript中,判断两个对象是否相等有多种方法,取决于你对相等的定义以及对象属性的类型,本文将介绍几种常见的方法,感兴趣的同学可以参考阅读

严格相等运算符 (===)

使用 === 运算符可以比较两个对象是否引用同一个对象。如果两个变量引用了同一个对象,则它们是相等的,否则它们是不相等的。例如:

const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

在上面的例子中,obj1obj2 的属性值相同,但它们是不同的对象,因此它们的 === 比较返回 false。而 obj1obj3 引用了同一个对象,它们是相等的,因此 obj1 === obj3 返回 true

这里就是严格比较,引用地址和属性名属性值都要一一对应。

对象属性的比较

如果你只是需要比较两个对象的属性是否相等(不比较引用地址),你可以使用循环或 Object.keys 方法来获取对象属性的列表,并比较它们的值。例如:

function isObjectEqual(obj1, obj2) {
  const obj1Keys = Object.keys(obj1);
  const obj2Keys = Object.keys(obj2);

  if (obj1Keys.length !== obj2Keys.length) {
    return false;
  }

  for (let key of obj1Keys) {
    if (obj1[key] !== obj2[key]) {
      return false;
    }
  }

  return true;
}

const obj1 = { a: 1, b: "hello" };
const obj2 = { a: 1, b: "world" };
const obj3 = { a: 1, b: "hello" };

console.log(isObjectEqual(obj1, obj2)); // false
console.log(isObjectEqual(obj1, obj3)); // true

在上面的例子中,isObjectEqual 函数比较了 obj1obj2 的属性值并返回 false,因为它们的 b 属性的值不相等。而 isObjectEqual(obj1, obj3) 返回 true,因为它们的所有属性值都相等。

使用 Lodash 等工具库判断两个对象是否相等

可以使用 Lodash 的 isEqual 方法(依然不比较引用地址)。isEqual 方法会递归比较两个对象的属性值是否相等,包括嵌套对象和数组。

const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
const obj3 = { a: 1, b: { c: 3 } };

console.log(_.isEqual(obj1, obj2)); // true
console.log(_.isEqual(obj1, obj3)); // false

在上面的例子中,_.isEqual(obj1, obj2) 返回 true,因为它们的所有属性值都相等,包括嵌套的对象。而 _.isEqual(obj1, obj3) 返回 false,因为它们的 b.c 属性的值不相等。

JSON.stringify 方法

如果你的对象中只包含简单类型(如数字、字符串、布尔值和 null)以及其他对象或数组,则可以使用 JSON.stringify 方法将对象转换为字符串,然后比较这些字符串(还是不比较引用地址)。例如:

const obj1 = { a: 1, b: "hello", c: true };
const obj2 = { a: 1, b: "hello", c: true };
const obj3 = { a: 1, b: "world", c: true };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
console.log(JSON.stringify(obj1) === JSON.stringify(obj3)); // false

在上面的例子中,JSON.stringify(obj1)JSON.stringify(obj2) 都返回相同的字符串,因此它们的比较返回 true。而 JSON.stringify(obj1)JSON.stringify(obj3) 返回不同的字符串,因此比较返回 false

需要注意的是,这种方法只适用于简单类型和嵌套对象或数组,因为它无法处理对象中包含函数、正则表达式和 Date 等类型的情况。

使用 Object.is() 方法

它与 === 运算符类似,但是有一些特殊情况,例如 Object.is(+0, -0) 返回 false,而 === 运算符返回 true

const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(Object.is(obj1, obj2)); // false
console.log(Object.is(obj1, obj3)); // true

在上面的例子中,Object.is(obj1, obj2) 返回 false,因为 obj1 和 obj2 是两个不同的对象,而 Object.is(obj1, obj3) 返回 true,因为 obj1 和 obj3 引用了同一个对象。

到此这篇关于在JS中判断两个对象是否相等方法详解的文章就介绍到这了,更多相关JS判断两个对象是否相等内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    这篇文章主要介绍了javascript运动效果,结合实例形式总结分析JavaScript实现放大缩小、滑动淡入、滚动等效果的方法,需要的朋友可以参考下
    2016-01-01
  • 详解bootstrap的modal-remote两种加载方式【强化】

    详解bootstrap的modal-remote两种加载方式【强化】

    本篇文章主要介绍了详解bootstrap的modal-remote两种加载方式【强化】,具有一定的参考价值,有兴趣的可以了解一下。
    2017-01-01
  • JavaScript find()方法及返回数据实例

    JavaScript find()方法及返回数据实例

    这篇文章主要介绍了JavaScript中的find()方法和返回数据的内存指向,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • JavaScript实现百度搜索框效果

    JavaScript实现百度搜索框效果

    这篇文章主要为大家详细介绍了JavaScript实现百度搜索框效果 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • JavaScript的防抖和节流一起来了解下

    JavaScript的防抖和节流一起来了解下

    这篇文章主要为大家详细介绍了JavaScript的防抖和节流,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • JavaScript精炼之构造函数 Constructor及Constructor属性详解

    JavaScript精炼之构造函数 Constructor及Constructor属性详解

    对象的constructor属性用于返回创建该对象的函数,也就是我们常说的构造函数,除了创建对象,构造函数(constructor) 还做了另一件有用的事情—自动为创建的新对象设置了原型对象(prototype object)
    2015-11-11
  • 微信小程序实现音频文件播放进度的实例代码

    微信小程序实现音频文件播放进度的实例代码

    这篇文章主要介绍了微信小程序实现音频文件播放进度的实例代码,代码包括对进度条的实现及进度条的滑动,对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • postman自定义函数实现 时间函数的思路详解

    postman自定义函数实现 时间函数的思路详解

    Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。这篇文章主要给大家介绍postman自定义函数实现 时间函数的思路详解,感兴趣的朋友一起看看吧
    2019-04-04
  • Javascript中parseInt的正确使用方式

    Javascript中parseInt的正确使用方式

    今天小编就为大家分享一篇关于Javascript中parseInt的正确使用方式,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • javascript 星级评分效果(手写)

    javascript 星级评分效果(手写)

    今天上午抽空随手写了个星级评分的效果,给大家分享下。由于水平有限,如有问题请指出;首先要准备一张星星的图片,灰色是默认状态,黄色是选择状态,需要的朋友可以参考下
    2012-12-12

最新评论