侵权投诉

如何正确比较JavaScript中的对象

2020-11-12 11:09 次阅读

比较JavaScript中的值非常简单,只需用相等运算符即可,例如严格相等运算符:

但是对象却有结构化的数据,所以比较起来比较困难。在本文中,你将学习如何正确比较JavaScript中的对象。

1.引用比较

JavaScript提供了3种方法来对值进行比较:

严格相等运算符===宽松相等运算符==Object.is()函数

当使用上述任何一种方法比较对象时,只有在比较的值引用了相同的对象实例时,比较的结果为true。这就是参照相等性。

让我们定义对象hero1和hero2,并查看实际中的参照相等性:

hero1===hero1的计算结果为true,因为两个操作数均指向了同一个对象实例hero1。

另一方面,hero1===hero2的计算结果为false,因为hero1和hero2是不同的对象实例。

有意思的是,hero1和hero2对象的内容是相同的:两个对象都有一个name属性,它的其值是‘Batman’。尽管如此,即使比较相同结构的对象,hero1===hero2的结果也是false。

当你想比较对象引用而不是它们的内容时,引用相等是很有用的。但是在更多的情况之下,你都想针对对象的实际内容进行比较:例如属性及它们的值。

接下来看看如何通过对象的内容比较对象是否相等。

2.手动比较

按内容比较对象最直接的方法是读取属性并手动比较它们。

例如,让我们编写一个特殊的函数isHeroEqual()来比较两个hero对象:

isHeroEqual()访问两个对象的属性name并比较它们的值。

如果被比较的对象具有一些属性,我更喜欢编写诸如isHeroEqual()之类的比较函数。这类函数具有良好的性能:在比较中只会涉及少数几个属性访问器和相等运算符。

手动比较需要手动提取属性,对于简单对象来说,这不是问题。但是,要对较大的对象(或结构未知的对象)进行比较,就不方便了,因为它需要大量的样板代码。

那么让我们来看看对象的浅层比较能提供哪些帮助。

3.浅层比较

如果用浅层比较检查对象,你必须获取两个对象的属性列表(使用Object.keys()),然后检查它们的属性值是否相等。

下面的代码是浅层比较的一种实现方式:

在函数内部,keys1和keys2是分别包含object1和object2属性名称的数组。

用for循环遍历键,并比较object1和object2的每个属性。

使用浅层比较,你可以轻松对有着许多属性的对象进行相等性检查:

shallowEqual(hero1,hero2)返回true,因为对象hero1和hero2具有相同的属性(name和realName),并且值也相同。

另一方面,由于hero1和hero3具有不同的属性,所以shallowEqual(hero1,hero3)将会返回false。

但是JavaScript中的对象是可以嵌套的。在这种情况下,浅层比较并不能很好地发挥作用。

下面对具有嵌套对象的对象执行浅层比较检查:

这次,即使两个对象hero1和hero2具有相同的内容,shallowEqual(hero1,hero2)也将会返回false。

发生这种情况是因为嵌套对象hero1.address和hero2.address是不同的对象实例。因此,浅层比较认为hero1.address和hero2.address是两个不同的值。

解决嵌套对象的问题需要进行深层比较。

4.深层比较

深层比较与浅层比较相似,不同之处在于,当属性中包含对象时,将对嵌套对象执行递归浅层比较。

看一下深层比较的实现:

第13行的areObjects&&!deepEqual(val1,val2)一旦检查到的属性是对象,则递归调用将会开始验证嵌套对象是否也相等。

现在用deepEquality()比较具有嵌套对象的对象:

深度比较函数能够正确地确定hero1和hero2是否具有相同的属性和值,包括嵌套对象hero1.address和hero2.address的相等性。

为了深入比较对象,我建议使用Node内置util模块的isDeepStrictEqual(object1,object2)(

https://nodejs.org/api/util.html#

util_util_isdeepstrictequal_val1_val2)或lodash库的_.isEqual(object1,object2)(

https://lodash.com/docs/4.17.15#isEqual)。

5.总结

引用相等性(使用===、==或Object.is())用来确定操作数是否为同一个对象实例。

手动检查对象是否相等,需要对属性值进行手动比较。尽管这类检查需要手动编码来对属性进行比较,但由于很简单,所以这种方法很方便。

当被比较的对象有很多属性或在运行时确定对象的结构时,更好的方法是使用浅层检查。

如果比较的对象具有嵌套对象,则应该进行深度比较检查。
责任编辑人:CC

收藏 人收藏
分享:

评论

相关推荐

微软正计划用JavaScript重写Office 365

据悉,Larkin在帖子中声称,微软不会放弃C ++,C#等重要的编程语言,API和正在使用的工具等....
的头像 倩倩 发表于 02-24 11:23 129次 阅读
微软正计划用JavaScript重写Office 365

ES6标准入门第二版PDF电子书免费下载

ES6(又名 ES2105)是 JavaScript 语言的新标准,2015 年 6 月正式发布后,....
发表于 02-24 08:00 17次 阅读
ES6标准入门第二版PDF电子书免费下载

JavaScript常用检测脚本实例代码免费下载

本文档的主要内容详细介绍的是JavaScript常用检测脚本实例代码免费下载。
发表于 02-03 17:02 22次 阅读
JavaScript常用检测脚本实例代码免费下载

使用javascript实现文字图片上下滚动的代码免费下载

本文档的主要内容详细介绍的是使用javascript实现文字图片上下滚动的代码免费下载。
发表于 02-02 14:36 27次 阅读
使用javascript实现文字图片上下滚动的代码免费下载

Javascript代码如何应用到网页中

在今天的网页中 javascript 使用相当广泛,它能使网页增加互动性。javascript 使有....
发表于 01-29 17:23 44次 阅读
Javascript代码如何应用到网页中

Javascript编写的软键盘代码免费下载

本文档的主要内容详细介绍的是Javascript编写的软键盘代码免费下载。
发表于 01-26 14:15 41次 阅读
Javascript编写的软键盘代码免费下载

Javascript制作声音按钮方法及代码免费下载

本文档的主要内容详细介绍的是Javascript制作声音按钮方法及代码免费下载。
发表于 01-22 17:32 40次 阅读
Javascript制作声音按钮方法及代码免费下载

如何编写高质量的Javascript代码

这篇文章不仅仅从代码本身来考虑如何优化编码,也从代码的设计阶段来考虑,包括书写API文档,同事的re....
发表于 01-21 14:28 62次 阅读
如何编写高质量的Javascript代码

如何组织大型JavaScript应用中的代码

本文档的主要内容详细介绍的是如何组织大型JavaScript应用中的代码。首先,我们来看看angul....
发表于 01-21 14:28 48次 阅读
如何组织大型JavaScript应用中的代码

从零开始使用华为DevEco Studio编写2048小游戏

从零开始使用华为DevEco Studio编写2048小游戏 写在前面本文由我和@WiKiBeta共同完成,也是我们第一次接触HarmonyOS,...
发表于 12-02 16:58 404次 阅读
从零开始使用华为DevEco Studio编写2048小游戏

从零开始使用华为DevEco Studio编写2048小游戏

从零开始使用华为DevEco Studio编写2048小游戏 写在前面本文由我和@WiKiBeta共同完成,也是我们第一次接触HarmonyOS,...
发表于 11-23 16:45 101次 阅读
从零开始使用华为DevEco Studio编写2048小游戏

JavaScript为什么如此受欢迎?

JavaScript 之所以能在编程语言中名列前茅,是有充分的理由的。
的头像 如意 发表于 11-17 15:08 405次 阅读
JavaScript为什么如此受欢迎?

如何使用圆弧对象?

使用圆弧对象的方法
发表于 11-12 07:11 0次 阅读
如何使用圆弧对象?

请问如何使用基本对象?

如何使用基本对象
发表于 11-11 06:35 0次 阅读
请问如何使用基本对象?

什么是json?

什么是json json注意事项 JSON 键/值对 JSON 与 JS 对象的关系 ...
发表于 11-09 06:39 0次 阅读
什么是json?

请问哪位大神可以详细介绍JavaScript浅拷贝和深拷贝?

JavaScript数据类型 JavaScript浅拷贝和深拷贝
发表于 11-05 07:16 101次 阅读
请问哪位大神可以详细介绍JavaScript浅拷贝和深拷贝?

JavaScript事件响应的处理

用户通过时间与浏览器中的页面进行交互,在JavaScript脚本内置的和自定义事件处理程序来响应用户的动作,实现更具交互性,动态...
发表于 11-04 08:04 0次 阅读
JavaScript事件响应的处理

学习javaScript的难点是什么?

在学习javaScript中你觉得最难的是什么?? 两链一包? 还是this? ...
发表于 10-27 14:27 0次 阅读
学习javaScript的难点是什么?

Math对象属性和方法

valueOf() 方法返回 Math 对象的原始值。 该原始值由 Math 对象派生的所有对象继承。 valueOf() 方法通常由 JavaScript ...
发表于 10-27 12:21 0次 阅读
Math对象属性和方法

鸿蒙系统中JS框架的逐行分析

我在前文中曾经介绍过鸿蒙的 Javascript 框架,这几天终于把 JS 仓库编译通过了,期间踩了....
的头像 鸿蒙系统HarmonyOS 发表于 10-21 14:37 429次 阅读
鸿蒙系统中JS框架的逐行分析

微软为win10添加选项:可在IE浏览器终禁用JavaScript

作为 2020 年 10 月安全更新的一部分,微软为 Windows 添加了一个新选项,使系统管理员....
的头像 如意 发表于 10-19 17:43 478次 阅读
微软为win10添加选项:可在IE浏览器终禁用JavaScript

CSS 计数器的数字递增动效技术解析

CSS 计数器是由 CSS 维护的变量,这些变量可根据 CSS 规则增加从而跟踪使用次数。
的头像 39度创意研究所 发表于 10-18 10:09 493次 阅读
CSS 计数器的数字递增动效技术解析

微前端需要JavaScript的原因是什么

微前端需要JavaScript为什么?许多微前端解决方案都是JavaScript框架。JavaScr....
的头像 陈翠 发表于 10-16 14:50 551次 阅读
微前端需要JavaScript的原因是什么

React、Preact和Inferno谁才是真正优秀的JavaScript框架?

JavaScript中有许多框架,且各有千秋。在过去的几个月中,笔者一直在研究各种JavaScrip....
的头像 如意 发表于 10-13 16:12 383次 阅读
React、Preact和Inferno谁才是真正优秀的JavaScript框架?

盘点总结ECMAScript新版本的四大功能的神秘之处

2020年可能已经位列史上最糟糕年份TOP5了。那么不妨忘记今年,期待一下2021会有什么惊喜吧!没....
的头像 如意 发表于 10-10 09:53 401次 阅读
盘点总结ECMAScript新版本的四大功能的神秘之处

2020年JavaScript开发人员必学的五种有用的业余技能

开发人员的一生可以用两句话概括:计算器,以及学习新技能。成为开发人员绝非易事,他们是解决问题的人,也....
的头像 如意 发表于 09-26 10:01 482次 阅读
2020年JavaScript开发人员必学的五种有用的业余技能

JavaScript 简介

## JavaScript 简介 [点击这里学习更多JavaScript知识 ],或搜索 jsrunJavaScript 是世界上最流行的编程语言。这门语言可...
发表于 09-09 17:30 101次 阅读
JavaScript 简介

干货:教你如何使用JavaScript字符串中的pad方法

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padSt....
的头像 如意 发表于 09-03 11:17 465次 阅读
干货:教你如何使用JavaScript字符串中的pad方法

干货:如何构建一个JavaScript插件系统(附源码)

WordPress有插件、 jQuery有插件、Gatsby、Eleventy和Vue也是如此。插件....
的头像 如意 发表于 09-02 11:24 642次 阅读
干货:如何构建一个JavaScript插件系统(附源码)

W3Cschoool入门教程

W3Cschoool菜鸟教程是一个提供最新的web技术站点,本站免费提供了建站相关的技术文档,帮助广....
发表于 08-31 08:00 194次 阅读
W3Cschoool入门教程

JavaScript已经被淘汰了吗?不再是主流语言了吗?

JavaScript被淘汰了吗?我在许多不同的网站(最近是在Quora)上多次阅读到这个问题,我一直....
的头像 如意 发表于 08-17 16:57 876次 阅读
JavaScript已经被淘汰了吗?不再是主流语言了吗?

Java实验:类和对象的扩展

Java实验:类和对象的扩展
发表于 07-08 15:36 110次 阅读
Java实验:类和对象的扩展

使用JavaScript创建对象的方法和案例

Javascript中的一切几乎都是对象,无论是数组还是函数。本文将教你使用JavaScript创建....
的头像 如意 发表于 07-06 09:41 770次 阅读
使用JavaScript创建对象的方法和案例

面向对象程序设计C++语言描述原书第2版PDF电子书免费下载

《面向对象程序设计:C++语言描述(原书第2版)》深刻论述了C++语言的面向对象程序设计的各种技术。....
发表于 06-30 08:00 101次 阅读
面向对象程序设计C++语言描述原书第2版PDF电子书免费下载

HTML和JavaScript编程笔试题资料免费下载

本文档的主要内容详细介绍的是HTML和JavaScript编程笔试题资料免费下载。
发表于 05-08 17:29 176次 阅读
HTML和JavaScript编程笔试题资料免费下载

JAVASCRIPT与单个线程的工作

事件循环是用来理解JavaScript的最重要的方面之一。这篇文章旨在解释JavaScript如何与....
的头像 汽车玩家 发表于 05-05 22:07 641次 阅读
JAVASCRIPT与单个线程的工作

前端的发展历史是怎么样的详细说明

1990年,首个web浏览器诞生,前端技术迎来发展;经过20年的发展:纯静态页面→JavaScrip....
发表于 04-13 08:00 136次 阅读
前端的发展历史是怎么样的详细说明

Javascript框架jQuery 3.5.0发布

Jquery是继prototype之后又一个优秀的 Javascript 框架。它是轻量级的js库(....
的头像 汽车玩家 发表于 04-12 19:24 963次 阅读
Javascript框架jQuery 3.5.0发布

JavaScript网页特效实例教程资料免费下载

本文档的主要内容详细介绍的是JavaScript网页特效实例教程资料免费下载。
发表于 04-02 17:36 168次 阅读
JavaScript网页特效实例教程资料免费下载

JavaScript的简明语法教程详细资料说明

 JavaScript 是弱变量类型,定义变量不需要指定类型,接用var表示即可。
发表于 03-19 15:31 108次 阅读
JavaScript的简明语法教程详细资料说明

深入浅出RxJS的PDF电子书免费下载

这是⼀个信息技术爆炸的时代,计算机编程语⾔和框架层出不穷,同时,编程的风格也在发⽣变化。也许你还没有....
发表于 03-19 08:00 246次 阅读
深入浅出RxJS的PDF电子书免费下载

Vue框架的教程资料免费下载

Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计....
发表于 03-18 08:00 135次 阅读
Vue框架的教程资料免费下载

HTML DOM的使用教程详细说明

通过JavaScript,您可以重构整个HTML 文档。您可以添加、移除、改变或重排页面上的项目。要....
发表于 03-10 16:42 167次 阅读
HTML DOM的使用教程详细说明

前端程序员在什么地方容易出错

eb全栈是目前比较流行的语言,因为前端较其他语言相比,简单好学,而且现在的互联网公司几乎缺不了web....
发表于 03-06 10:01 165次 阅读
前端程序员在什么地方容易出错

JavaScript的基础知识和代码写法说明

JavaScript基础概念 JS的组成: 1.ECMAScript:Js语法 2....
的头像 Wildesbeast 发表于 02-13 14:20 1341次 阅读
JavaScript的基础知识和代码写法说明

JavaScript新增了哪一些特性

一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4 五个阶段,每个阶段提交....
发表于 01-03 14:28 248次 阅读
JavaScript新增了哪一些特性

javascript的作用域详细讲解

alert出来的是什么?在我们看来应该是“aaa”,实际上alert出来的是“undefined”。....
发表于 12-24 17:39 204次 阅读
javascript的作用域详细讲解

使用Javascript实现键盘事件全面控制的详细资料说明

本文档的主要内容详细介绍的是使用Javascript实现键盘事件全面控制的详细资料说明包括了:第一部....
发表于 12-18 16:14 185次 阅读
使用Javascript实现键盘事件全面控制的详细资料说明

javascript去除空白字符的方法详细说明

  本文档的主要内容详细介绍的是javascript去除空白字符的方法详细说明。
发表于 12-18 16:14 188次 阅读
javascript去除空白字符的方法详细说明

Javascript程序设计的十一个实验的资料说明

本文档的主要内容详细介绍的是Javascript程序设计的十一个实验的资料说明包括了:使用Dream....
发表于 11-19 17:01 217次 阅读
Javascript程序设计的十一个实验的资料说明

JavaScript模块化开发实验教程之webpack入门资料说明

本文档的主要内容详细介绍的是JavaScript模块化开发实验教程之webpack入门资料说明
发表于 11-19 17:01 187次 阅读
JavaScript模块化开发实验教程之webpack入门资料说明

WEB的技术综合应用和设计研究资料实验说明

一、实验目的 WEB技术综合应用和设计研究。 二、实验内容 自己选择主题设计并建立一个基于we....
发表于 11-07 16:52 247次 阅读
WEB的技术综合应用和设计研究资料实验说明

Javascript的基础代码总结

本文档的主要内容详细介绍的是Javascript的基础代码总结。
发表于 11-07 16:51 239次 阅读
Javascript的基础代码总结

HTML4.0的事件属性学习教程免费下载

HTML 4.0的新特性之一是使HTML事件触发浏览器中的行为,比方说当用户点击一个HTML元素时启....
发表于 11-06 17:11 220次 阅读
HTML4.0的事件属性学习教程免费下载

使用JavaScript实现鼠标跟踪的实验资料免费下载

本文档的主要内容详细介绍的是使用JavaScript实现鼠标跟踪的实验资料免费下载。
发表于 11-06 11:54 210次 阅读
使用JavaScript实现鼠标跟踪的实验资料免费下载

Javascript公共脚本库之弹出层的详细资料说明

在网上弹出框的脚本相当多, 而且还有各种第三方JS框架可供我们使用。但是其中有的脚本过于简单,仅仅粗....
发表于 11-06 11:54 175次 阅读
Javascript公共脚本库之弹出层的详细资料说明

使用JavaScript给网站首页加上自动问候的功能实践说明

1给网站首页加上自动问候的功能。网页将可以在不同的时段向访问者显示不同的问候语,例如在上午8:00—....
发表于 11-05 15:34 491次 阅读
使用JavaScript给网站首页加上自动问候的功能实践说明

JavaScript脚本语言的主要特征和优缺点及应用与编程等资料概述

 为了给最终用户以使用方便、界面美观的感受,很多基于特定客户端的程序都转向趋向于采用浏览器客户端的应....
发表于 10-29 17:06 243次 阅读
JavaScript脚本语言的主要特征和优缺点及应用与编程等资料概述

如何对指定的网页进行截图C语言代码免费下载

本文档的主要内容详细介绍的是如何对指定的网页进行截图C语言代码免费下载。
发表于 10-25 16:46 182次 阅读
如何对指定的网页进行截图C语言代码免费下载