在写一个物流模版编辑的时候,遇到这样一个需求:如果用户编辑一个已经存在的物流模版,如果数据没有发生变化,就阻止用户提交。这样后台就不用重新写入数据库。当时觉得这不是什么大问题,就放开了。
后面在写一个Dialog组件时,遇到一个配置参数设置:将传入的参数和默认参数相比较,如果传入的参数设置了对应值,就跳过。如果没有设置,就取默认参数的值。这里也就要比较两个对象的key和value。

两个条件:

  • 初始数据克隆缓存下来。
  • 新获取的数据格式与初始数据一致。只是key或value值变化。

思路如下:

由于不能同时遍历两个对象,所以就需要以一个对象为基准对象,再去获取对应的key的路径。取出所有key的路径和value一一比较。
需要两个函数:

  • 递归取得基准对象的key的子父级关系。
  • 操作结果函数(比如比较是否相等或者将没有key补上)

获取基准对象的子父级路径函数如下:

  • obj为基准对象,是一个对象字面量
  • fn为回调函数
  • recor 为一个数组,用于记录key的层级路径
  • baseObj 基准对象
  • compObj 对比对象
function recursion(obj, fn, recor, baseObj, compObj){var key, cur;if(obj && typeof obj === "object"){for(key in obj){if(!obj.hasOwnProperty(key)) continue;recor.push(key);cur = obj[key];if(cur && typeof obj === "object"){recursion(cur, fn, recor);}// 将记录的层级关系数组传入回调fn(baseObj, compObj, recor);recor.pop();}}
}

操作结果函数:通过路径数组,依次检查对象是否存在

  • baseObj 基准对象
  • compObj 需要对比的对象
  • keyArr 保存key值的数组
function compare(baseObj, compObj, keyArr){var base = baseObj, comp = compObj, i, len, key;for( i = 0, len = keyArr.length; i < len; i++){key = keyArr[i];// 如果比较对象没有基准对象对应的key,将基准对象的值赋值给比较对象// 并跳出循环if(!comp.hasOwnProperty(key)){comp[key] = base[key];break;}// 比较下一个comp = comp[key];base = base[key];}
}

调用

  // 定义两个对象// 基准对象var base_obj = {"str" : "simple text","obj" : {"o_str" : "simple obj text","arr" : [1, 2, 3],"o_obj" : {"boll" : true,"tt" : "test"}}}// 对比对象var comp_obj = {"str" : "simple text","obj" : {"o_str" : "simple obj text","arr" : [1, 2, 3]}}// 调用recursion(base_obj, compare, [], base_obj, comp_obj);// 运行结果comp_obj => {"str" : "simple text","obj" : {"o_str" : "simple obj text","arr" : [1, 2, 3],"o_obj" : {"boll" : true,"tt" : "test"}}}

如果要判断相等,在compare中,如果comp.hasOwnPropery(key)为假,直接return false就是了。循环完了还没有return,就可以return true了。

转载于:https://www.cnblogs.com/CoinXu/p/4573971.html

JavaScript如何比较两个对象字面量是否一样(key 和 value都对比)相关推荐

  1. JavaScript基础07-day09【嵌套for循环、break和continue、对象、数据类型、对象字面量、函数】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  2. 前端自学之路 Javascript 行话浅析(一)——字面量 包装对象 作用域

    文章目录 直接量(literal) Undefine NULL 包装对象 变量作用域 函数作用域 块级作用域 作用域链 变量解析 引用错误 本篇主要涉及较为基础的, 变量, 作用域方面的名词. 为啥要 ...

  3. JavaScript 对象字面量

    目录 一. 对象的基本用法 二. 遍历对象 三. 属性的类型 1. 数据类型 2. 访问浏览器属性 3.定义多个属性 4. 检测属性 5. 对象安全防护(对象拓展,对象密封,对象冻结) 四.对象在实际 ...

  4. 字面量、对象字面量、函数字面量、函数定义

    #1.字面量(literal) 用于表达一个固定值的表示法,又叫常量. [JS程序执行到代码中的字面量,会立即知道它是什么类型的数据,值是多少] #2.对象字面量 语法: {k1:v1, k2:v2, ...

  5. js之字面量、对象字面量的访问、关键字in的用法

    一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...

  6. JavaScript学习(四十一)—字面量形式创建对象的注意事项和不足

    JavaScript学习(四十一)-字面量形式创建对象的注意事项和不足 一.字面量形式创建对象的注意事项 如果对象没有名称则该对象称之为匿名对象. 对象名保存对象在堆内存中的地址,通过该地址可以找到堆 ...

  7. php字面量,浅谈js之字面量、对象字面量的访问、关键字in的用法

    一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...

  8. 对象、对象的属性、对象字面量、枚举对象中的属性、可变类型、变量和对象——JS对象

    目录 一.对象 二.对象的属性 三.对象字面量 四.枚举对象中的属性 五.可变类型 六.变量和对象 数据类型: 原始值:(不可变类型) 1.数值 Number 2.大整数 BigInt 3.字符串 S ...

  9. js对象字面量属性间相互访问的问题 和 这个问题与执行环境的关系

    对象字面量属性间无法相互访问的问题: 我曾经在定义一个对象时, 并出于复用性的考虑试图复用某些属性: // test 1 var person = {firstName : "Bill&qu ...

最新文章

  1. 沼泽鳄鱼_SSL2511_矩阵乘法
  2. Zookeeper的节点操作
  3. View,SurfaceView,SurfaceHolder
  4. 我对STL的一些看法(五)初识关联容器
  5. Hibernate常用的Java数据类型映射到mysql和Oracle
  6. luogu Cantor表
  7. 【心情】bjdldrz
  8. jQuery UI dialog实现dialog弹框显示
  9. 深入分析Linux自旋锁【转】
  10. ttl备份机顶盒固件_电信盒子华丽变身全网通盒子,电视免费看,备份固件方法详解...
  11. 修改tomcat浏览器地址栏图标
  12. 在页面超链接a前加上图标
  13. 如何成为一名优秀员工
  14. FLANN C++ 使用
  15. KVM 核心技术详解
  16. 电镀清洗水中提取黄金的方法?
  17. 为高效学习神器 Anki 部署一个专属同步服务器
  18. Java,基于简单输入的薪水计算器
  19. 【k8s源码篇】k8s类型定义1之yaml与单体、list对象转换
  20. SharePoint中在线编辑文档

热门文章

  1. 工作中常用的linux命令梳理
  2. Windows Mobile使用Shared Memory(共享内存)进行IPC(进程间通信)的开发
  3. 乐变黄杲:当前如何选择App热更新服务
  4. 构建高性能ASP.NET应用的12点建议
  5. Open-E DSS V7 应用系列之六 构建软件iSCSI
  6. ppt转换成pdf转换器免费版
  7. 3个CCIE对一个工程师的面试题(远去之路无比艰辛啊!)
  8. 越阳刚的男人越容易生女孩
  9. GCD BZOJ2818 [省队互测] 数学
  10. setInterval动态时间处理