JavaScript如何比较两个对象字面量是否一样(key 和 value都对比)
在写一个物流模版编辑的时候,遇到这样一个需求:如果用户编辑一个已经存在的物流模版,如果数据没有发生变化,就阻止用户提交。这样后台就不用重新写入数据库。当时觉得这不是什么大问题,就放开了。
后面在写一个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都对比)相关推荐
- JavaScript基础07-day09【嵌套for循环、break和continue、对象、数据类型、对象字面量、函数】
学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
- 前端自学之路 Javascript 行话浅析(一)——字面量 包装对象 作用域
文章目录 直接量(literal) Undefine NULL 包装对象 变量作用域 函数作用域 块级作用域 作用域链 变量解析 引用错误 本篇主要涉及较为基础的, 变量, 作用域方面的名词. 为啥要 ...
- JavaScript 对象字面量
目录 一. 对象的基本用法 二. 遍历对象 三. 属性的类型 1. 数据类型 2. 访问浏览器属性 3.定义多个属性 4. 检测属性 5. 对象安全防护(对象拓展,对象密封,对象冻结) 四.对象在实际 ...
- 字面量、对象字面量、函数字面量、函数定义
#1.字面量(literal) 用于表达一个固定值的表示法,又叫常量. [JS程序执行到代码中的字面量,会立即知道它是什么类型的数据,值是多少] #2.对象字面量 语法: {k1:v1, k2:v2, ...
- js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...
- JavaScript学习(四十一)—字面量形式创建对象的注意事项和不足
JavaScript学习(四十一)-字面量形式创建对象的注意事项和不足 一.字面量形式创建对象的注意事项 如果对象没有名称则该对象称之为匿名对象. 对象名保存对象在堆内存中的地址,通过该地址可以找到堆 ...
- php字面量,浅谈js之字面量、对象字面量的访问、关键字in的用法
一:字面量含义 字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量. 字面量分为字符串字面量(string literal ).数组字面量(array literal) ...
- 对象、对象的属性、对象字面量、枚举对象中的属性、可变类型、变量和对象——JS对象
目录 一.对象 二.对象的属性 三.对象字面量 四.枚举对象中的属性 五.可变类型 六.变量和对象 数据类型: 原始值:(不可变类型) 1.数值 Number 2.大整数 BigInt 3.字符串 S ...
- js对象字面量属性间相互访问的问题 和 这个问题与执行环境的关系
对象字面量属性间无法相互访问的问题: 我曾经在定义一个对象时, 并出于复用性的考虑试图复用某些属性: // test 1 var person = {firstName : "Bill&qu ...
最新文章
- 沼泽鳄鱼_SSL2511_矩阵乘法
- Zookeeper的节点操作
- View,SurfaceView,SurfaceHolder
- 我对STL的一些看法(五)初识关联容器
- Hibernate常用的Java数据类型映射到mysql和Oracle
- luogu Cantor表
- 【心情】bjdldrz
- jQuery UI dialog实现dialog弹框显示
- 深入分析Linux自旋锁【转】
- ttl备份机顶盒固件_电信盒子华丽变身全网通盒子,电视免费看,备份固件方法详解...
- 修改tomcat浏览器地址栏图标
- 在页面超链接a前加上图标
- 如何成为一名优秀员工
- FLANN C++ 使用
- KVM 核心技术详解
- 电镀清洗水中提取黄金的方法?
- 为高效学习神器 Anki 部署一个专属同步服务器
- Java,基于简单输入的薪水计算器
- 【k8s源码篇】k8s类型定义1之yaml与单体、list对象转换
- SharePoint中在线编辑文档