阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

四种在Javascript比较对象的方法

263次阅读
没有评论

共计 3703 个字符,预计需要花费 10 分钟才能阅读完成。

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

四种在 Javascript 比较对象的方法

比较 JavaScript 中的原始值非常简单。只需使用任何一种可用的相等运算符即可,例如严格相等运算符:

'a' === 'c'; // => false 
1   === 1;   // => true

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

1. 引用比较

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

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

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

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

const hero1 = {name: 'Batman'}; 
const hero2 = {name: 'Batman'}; 
 
hero1 === hero1; // => true 
hero1 === hero2; // => false 
 
hero1 == hero1; // => true 
hero1 == hero2; // => false 
 
Object.is(hero1, hero1); // => true 
Object.is(hero1, hero2); // => false

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

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

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

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

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

2. 手动比较

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

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

function isHeroEqual(object1, object2) {return object1.name === object2.name;} 
 
const hero1 = {name: 'Batman'}; 
const hero2 = {name: 'Batman'}; 
const hero3 = {name: 'Joker'}; 
 
isHeroEqual(hero1, hero2); // => true 
isHeroEqual(hero1, hero3); // => false

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

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

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

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

3. 浅层比较

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

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

function shallowEqual(object1, object2) {const keys1 = Object.keys(object1); 
  const keys2 = Object.keys(object2); 
 
  if (keys1.length !== keys2.length) {return false;} 
 
  for (let index = 0; index < keys1.length; index++) {const val1 = object1[keys1[index]]; 
    const val2 = object2[keys2[index]]; 
    if (val1 !== val2) {return false;} 
  } 
 
  return true; 
}

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

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

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

const hero1 = { 
  name: 'Batman', 
  realName: 'Bruce Wayne' 
}; 
const hero2 = { 
  name: 'Batman', 
  realName: 'Bruce Wayne' 
}; 
const hero3 = {name: 'Joker'}; 
 
shallowEqual(hero1, hero2); // => true 
shallowEqual(hero1, hero3); // => false

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

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

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

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

const hero1 = { 
  name: 'Batman', 
  address: {city: 'Gotham'} 
}; 
const hero2 = { 
  name: 'Batman', 
  address: {city: 'Gotham'} 
}; 
 
shallowEqual(hero1, hero2); // => false

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

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

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

4. 深层比较

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

看一下深层比较的实现:

function deepEqual(object1, object2) {const keys1 = Object.keys(object1); 
  const keys2 = Object.keys(object2); 
 
  if (keys1.length !== keys2.length) {return false;} 
 
  for (let index = 0; index < keys1.length; index++) {const val1 = object1[keys1[index]]; 
    const val2 = object2[keys2[index]]; 
    const areObjects = isObject(val1) && isObject(val2); 
    if (areObjects && !deepEqual(val1, val2) ||  
        !areObjects && val1 !== val2) {return false;} 
  } 
 
  return true; 
} 
 
function isObject(object) {return object != null && typeof object === 'object';}

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

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

const hero1 = { 
  name: 'Batman', 
  address: {city: 'Gotham'} 
}; 
const hero2 = { 
  name: 'Batman', 
  address: {city: 'Gotham'} 
}; 
 
deepEqual(hero1, hero2); // => true

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

为了深入比较对象,我建议使用 Node 内置 util 模块的 isDeepStrictEqual(object1, object2) 或 lodash 库的 _.isEqual(object1, object2)。

5. 总结

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

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

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

如果比较的对象具有嵌套对象,则应该进行深度比较检查。

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-07-25发表,共计3703字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中

星哥玩云

星哥玩云
星哥玩云
分享互联网知识
用户数
4
文章数
19351
评论数
4
阅读量
7985212
文章搜索
热门文章
星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛NAS-6:抖音视频同步工具,视频下载自动下载保存

星哥带你玩飞牛 NAS-6:抖音视频同步工具,视频下载自动下载保存 前言 各位玩 NAS 的朋友好,我是星哥!...
星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛NAS-3:安装飞牛NAS后的很有必要的操作

星哥带你玩飞牛 NAS-3:安装飞牛 NAS 后的很有必要的操作 前言 如果你已经有了飞牛 NAS 系统,之前...
我把用了20年的360安全卫士卸载了

我把用了20年的360安全卫士卸载了

我把用了 20 年的 360 安全卫士卸载了 是的,正如标题你看到的。 原因 偷摸安装自家的软件 莫名其妙安装...
再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见zabbix!轻量级自建服务器监控神器在Linux 的完整部署指南

再见 zabbix!轻量级自建服务器监控神器在 Linux 的完整部署指南 在日常运维中,服务器监控是绕不开的...
飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛 NAS 中安装 Navidrome 音乐文件中文标签乱码问题解决、安装 FntermX 终端 问题背景 ...
阿里云CDN
阿里云CDN-提高用户访问的响应速度和成功率
随机文章
恶意团伙利用 PHP-FPM 未授权访问漏洞发起大规模攻击

恶意团伙利用 PHP-FPM 未授权访问漏洞发起大规模攻击

恶意团伙利用 PHP-FPM 未授权访问漏洞发起大规模攻击 PHP-FPM(FastCGl Process M...
在Windows系统中通过VMware安装苹果macOS15

在Windows系统中通过VMware安装苹果macOS15

在 Windows 系统中通过 VMware 安装苹果 macOS15 许多开发者和爱好者希望在 Window...
飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛NAS中安装Navidrome音乐文件中文标签乱码问题解决、安装FntermX终端

飞牛 NAS 中安装 Navidrome 音乐文件中文标签乱码问题解决、安装 FntermX 终端 问题背景 ...
300元就能买到的”小钢炮”?惠普7L四盘位小主机解析

300元就能买到的”小钢炮”?惠普7L四盘位小主机解析

  300 元就能买到的 ” 小钢炮 ”?惠普 7L 四盘位小主机解析 最近...
多服务器管理神器 Nexterm 横空出世!NAS/Win/Linux 通吃,SSH/VNC/RDP 一站式搞定

多服务器管理神器 Nexterm 横空出世!NAS/Win/Linux 通吃,SSH/VNC/RDP 一站式搞定

多服务器管理神器 Nexterm 横空出世!NAS/Win/Linux 通吃,SSH/VNC/RDP 一站式搞...

免费图片视频管理工具让灵感库告别混乱

一言一句话
-「
手气不错
国产开源公众号AI知识库 Agent:突破未认证号限制,一键搞定自动回复,重构运营效率

国产开源公众号AI知识库 Agent:突破未认证号限制,一键搞定自动回复,重构运营效率

国产开源公众号 AI 知识库 Agent:突破未认证号限制,一键搞定自动回复,重构运营效率 大家好,我是星哥,...
小白也能看懂:什么是云服务器?腾讯云 vs 阿里云对比

小白也能看懂:什么是云服务器?腾讯云 vs 阿里云对比

小白也能看懂:什么是云服务器?腾讯云 vs 阿里云对比 星哥玩云,带你从小白到上云高手。今天咱们就来聊聊——什...
把小米云笔记搬回家:飞牛 NAS 一键部署,小米云笔记自动同步到本地

把小米云笔记搬回家:飞牛 NAS 一键部署,小米云笔记自动同步到本地

把小米云笔记搬回家:飞牛 NAS 一键部署,小米云笔记自动同步到本地 大家好,我是星哥,今天教大家在飞牛 NA...
150元打造低成本NAS小钢炮,捡一块3865U工控板

150元打造低成本NAS小钢炮,捡一块3865U工控板

150 元打造低成本 NAS 小钢炮,捡一块 3865U 工控板 一块二手的熊猫 B3 工控板 3865U,搭...
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸

一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸

一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸 前言 作为天天跟架构图、拓扑图死磕的...