在JS中如何判断两个对象是否相等

在JavaScript中,判断两个对象是否相等有多种方法,取决于你对 相等 的定义以及对象属性的类型。以下是几种常见的方法:

 

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

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

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

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

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

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

 

 

 

2. 对象属性的比较

如果你只是需要比较两个对象的属性是否相等(不比较引用地址),你可以使用循环或 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 函数比较了 obj1 和 obj2 的属性值并返回 false ,因为它们的 b 属性的值不相等。而 isObjectEqual(obj1, obj3) 返回 true ,因为它们的所有属性值都相等。

 

 

 

3. 使用 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 属性的值不相等。

 

 

 

4. 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 等类型的情况。

 

5. 使用 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 引用了同一个对象。

 

无论你使用哪种方法,都需要明确你对 相等 的定义以及对象属性的类型,并选择适合你需求的方法。

原文链接:https://www.cnblogs.com/ronaldo9ph/p/17380814.html

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:在JS中如何判断两个对象是否相等 - Python技术站

(0)
上一篇 2023年5月8日
下一篇 2023年5月9日

相关文章

  • javascript通过元素id和name直接取得元素的方法

    当我们需要通过JavaScript直接获取页面元素时,可以利用元素的id和name属性进行操作。以下是获取元素的完整攻略: 通过id属性获取元素: 通过JavaScript获取某个元素的方法是使用document对象的getElementById()方法,并将目标元素的id值作为参数传递给该方法。例如: var element = document.getE…

    JavaScript 2023年6月10日
    00
  • jQuery插件form-validation-engine正则表达式操作示例

    以下是对jQuery插件form-validation-engine正则表达式操作的详细攻略。 简介 form-validation-engine是一个jQuery表单验证插件,支持很多种类型的验证,并且可以自定义验证规则。其中,正则表达式是一种非常常用且强大的验证方式。 在本篇攻略中,我们将通过两个示例说明如何使用正则表达式在form-validation…

    JavaScript 2023年6月10日
    00
  • 一起学写js Calender日历控件

    一起学写 JavaScript Calender 日历控件 – 完整攻略 本攻略将帮助你学习如何编写一个简单的 JavaScript 日历控件。我们将使用原生 JavaScript 实现该控件,这样可以更好地学习和理解 JavaScript 和 DOM 操作。 步骤 1:HTML 结构 我们需要一个 HTML 结构作为日历控件的基础。以下是一个基本的 HTM…

    JavaScript 2023年5月27日
    00
  • JavaScript第一个分水岭之数组的基本操作

    JavaScript中的数组是一种非常常用的数据结构,可以用于存储和操作一组数据。学会数组的基本操作是学习JavaScript的第一个重要分水岭。下面是一份完整的攻略,包括数组的基本操作和示例说明。 创建数组 可以使用以下两种方式来创建一个数组: 直接创建 可以使用方括号来直接创建一个数组,数组中的元素使用逗号分隔。 var arr = [1, 2, 3, …

    JavaScript 2023年5月27日
    00
  • 使用ajax实现无刷新改变页面内容和地址栏URL

    当我们的网站需要异步加载数据时,我们就需要使用Ajax技术来实现无刷新改变页面内容和地址栏URL。下面是实现的攻略: 步骤一:创建HTML文件 在HTML文件中,我们需要添加一个按钮和用来显示Ajax返回结果的div容器,如下所示: <!DOCTYPE html> <html lang="en"> <head…

    JavaScript 2023年6月11日
    00
  • vue-cli4.5.x快速搭建项目

    下面我会详细讲解一下如何使用vue-cli4.5.x快速搭建项目的完整攻略。步骤如下: 安装vue-cli 首先需要全局安装vue-cli,如果已经安装过了可以跳过这一步骤。使用以下命令在终端中进行安装: npm install -g @vue/cli 创建新项目 使用vue-cli可以快速创建一个新项目,只需要在终端中进入想要创建项目的文件夹,然后使用以下…

    JavaScript 2023年6月11日
    00
  • javascript结合fileReader 实现上传图片

    这里是关于JavaScript结合FileReader实现上传图片的完整攻略。 什么是FileReader? FileReader是HTML5中的一个API,用于访问本地文件并将文件内容读取到内存中。它可以读取文本、图像和音视频等资源,并将它们转换为可用的数据URL。 上传图片的基本步骤 要实现上传图片,我们需要先将选择的图片加载到内存中,然后再将它上传到服…

    JavaScript 2023年5月27日
    00
  • Eclipse配置Javascript开发环境图文教程

    针对你提出的问题,我会为你提供一份完整的Markdown文件,其中包含了标题、代码块和示例等元素。请仔细阅读,如果还有什么问题欢迎继续咨询。 Eclipse配置Javascript开发环境图文教程 介绍 Eclipse是一个非常流行的开发工具,可以用来开发多种编程语言。在这篇教程中,我们将会学到如何将Eclipse配置为Javascript开发环境。 步骤 …

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部