另一方面,由于 hero1
和 hero3
具有不同的属性,所以 shallowEqual(hero1, hero3)
将会返回 false
。
但是 JavaScript 中的对象是可以嵌套的。在这种情况下,浅层比较并不能很好地发挥作用。
下面对具有嵌套对象的对象执行浅层比较检查:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
这次,即使两个对象 hero1
和 hero2
具有相同的内容,shallowEqual(hero1, hero2)
也将会返回 false
。
发生这种情况是因为嵌套对象 hero1.address
和 hero2.address
是不同的对象实例。因此,浅层比较认为 hero1.address
和 hero2.address
是两个不同的值。
解决嵌套对象的问题需要进行深层比较。
4.深层比较
深层比较与浅层比较相似,不同之处在于,当属性中包含对象时,将对嵌套对象执行递归浅层比较。
看一下深层比较的实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
第 13 行的 areObjects && !deepEqual(val1, val2)
一旦检查到的属性是对象,则递归调用将会开始验证嵌套对象是否也相等。
现在用 deepEquality()
比较具有嵌套对象的对象:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
深度比较函数能够正确地确定 hero1
和 hero2
是否具有相同的属性和值,包括嵌套对象 hero1.address
和 hero2.address
的相等性。
为了深入比较对象,我建议使用Node内置util
模块的 isDeepStrictEqual(object1, object2)
或lodash
库的 _.isEqual(object1, object2)
。
5. 总结
引用相等性(使用 ===
、 ==
或 Object.is()
)用来确定操作数是否为同一个对象实例。
手动检查对象是否相等,需要对属性值进行手动比较。尽管这类检查需要手动编码来对属性进行比较,但由于很简单,所以这种方法很方便。
当被比较的对象有很多属性或在运行时确定对象的结构时,更好的方法是使用浅层检查。
如果比较的对象具有嵌套对象,则应该进行深度比较检查。
英文原文地址:https://dmitripavlutin.com/how-to-compare-objects-in-javascript/
作者:Dmitri Pavlutin
译文地址:https://segmentfault.com/a/1190000022913676
更多编程相关知识,请访问:编程入门!!
以上就是JavaScript中比较对象的几种方式的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《javascript》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者