基于JavaScript判断两个对象内容是否相等


Posted in Javascript onJanuary 10, 2020

这篇文章主要介绍了基于JavaScript判断两个对象内容是否相等,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

ES6中有一个方法判断两个对象是否相等,这个方法判断是两个对象引用地址是否一致

let obj1= {
  a: 1
 }
 let obj2 = {
  a: 1
 }
console.log(Object.is(obj1, obj2)) // false

let obj3 = obj1
console.log(Object.is(obj1, obj3)) // trueconsole.log(Object.is(obj2, obj3)) // false

当需求是比较两个对象内容是否一致时就没用了。

想要比较两个对象内容是否一致,思路是要遍历对象的所有键名和键值是否都一致:

1、判断两个对象是否指向同一内存

2、使用Object.getOwnPropertyNames获取对象所有键名数组

3、判断两个对象的键名数组是否相等

4、遍历键名,判断键值是否都相等

let obj1 = {
  a: 1,
  b: {
   c: 2
  }
 }
 let obj2 = {
  b: {
   c: 3
  },
  a: 1
 }
 function isObjectValueEqual(a, b) {
  // 判断两个对象是否指向同一内存,指向同一内存返回true
  if (a === b) return true
  // 获取两个对象键值数组
  let aProps = Object.getOwnPropertyNames(a)
  let bProps = Object.getOwnPropertyNames(b)
  // 判断两个对象键值数组长度是否一致,不一致返回false
  if (aProps.length !== bProps.length) return false
  // 遍历对象的键值
  for (let prop in a) {
   // 判断a的键值,在b中是否存在,不存在,返回false
   if (b.hasOwnProperty(prop)) {
    // 判断a的键值是否为对象,是则递归,不是对象直接判断键值是否相等,不相等返回false
    if (typeof a[prop] === 'object') {
     if (!isObjectValueEqual(a[prop], b[prop])) return false
    } else if (a[prop] !== b[prop]) {
     return false
    }
   } else {
    return false
   }
  }
  return true
 }
 console.log(isObjectValueEqual(obj1, obj2)) // false

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
可输入的下拉框
Jun 19 Javascript
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
JQUERY简单按钮轮换选中效果实现方法
May 07 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
基于JS判断对象是否是数组
Jan 10 #Javascript
JS数组属性去重并校验重复数据
Jan 10 #Javascript
JS图片懒加载的优点及实现原理
Jan 10 #Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 #jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 #jQuery
You might like
三个类概括PHP的五种设计模式
2012/09/05 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
Yii视图CGridView实现操作按钮定义地址示例
2016/07/14 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
2014/08/15 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
js实现验证码功能
2020/07/24 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
python文件的md5加密方法
2016/04/06 Python
安装Python的教程-Windows
2017/07/22 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
python中str内置函数用法总结
2020/12/27 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
幼儿园教师培训方案
2014/02/04 职场文书
市场开发计划书
2014/05/07 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
护士心得体会范文
2016/01/25 职场文书
python中redis包操作数据库的教程
2022/04/19 Python