javascript的对象内容对比
vue是这样对比的
function looseEqual (a, b) {
if (a === b) return true
const isObjectA = isObject(a)
const isObjectB = isObject(b)
if (isObjectA && isObjectB) {
try {
const isArrayA = Array.isArray(a)
const isArrayB = Array.isArray(b)
if (isArrayA && isArrayB) {
return a.length === b.length && a.every((e, i) => {
return looseEqual(e, b[i])
})
} else if (a instanceof Date && b instanceof Date) {
return a.getTime() === b.getTime()
} else if (!isArrayA && !isArrayB) {
const keysA = Object.keys(a)
const keysB = Object.keys(b)
return keysA.length === keysB.length && keysA.every(key => {
return looseEqual(a[key], b[key])
})
} else {
/* istanbul ignore next */
return false
}
} catch (e) {
/* istanbul ignore next */
return false
}
} else if (!isObjectA && !isObjectB) {
return String(a) === String(b)
} else {
return false
}
}
function isObject (obj) {
return obj !== null && typeof obj === 'object'
}
原生js是这样对比的
function ObjectContrast(objA,objB){
let flag = true
for(let i in objA){
if(Date.prototype.isPrototypeOf(objA[i]) || Date.prototype.isPrototypeOf(objB[i])){
objA[i] = new Date(objA[i]).Format("yyyy-MM-dd");
objB[i] = new Date(objB[i]).Format("yyyy-MM-dd");
}
if(Array.prototype.isPrototypeOf(objA[i]) || Array.prototype.isPrototypeOf(objB[i])){
continue;
}
if(objA[i] != objB[i]){
flag = false
}
}
return flag
}
//除此之外ObjectContrast也可以传第三个参数(数组)为规定,验证两个对象那些属性需要作对比,
//在其for循环内,首先验证数组是否为空(如果为空则比对全部),如果不为空,再验证 i 是否存在于这个数组(数组.indexOf(i))
//如果存在,再进行对比。
原生js还有这样对比的
function ObjectContrast(objA,objB){
let ObjectA = Object.keys(objA);
let ObjectB = Object.keys(objB);
if(ObjectA.length !== ObjectB.length){
return false;
}else if(ObjectA.length ===0&& ObjectB.length===0){
return true;
}else{
return !ObjectA.some((v,i)=>{
return ObjectA[v] !== ObjectB[v]
})
}
}
这里还有一些别的有意思的方法
1、数组对比:https://www.cnblogs.com/kukudelaomao/p/7093181.html
JS怎么比较两个数组是否有完全相同的元素?
Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false
<script type="text/javascript">alert([]==[]);alert([]===[]); </script>
要判断JS中的两个数组是否相同,需要先将数组转换为字符串,再作比较。以下两行代码将返回true
<script type="text/javascript">alert([].toString()== [].toString());alert([].toString()===[].toString()); </script>
JS要比较两个数组是否有相同的元素,即两个数组所有元素都相同,但元素的顺序不一定一致。只就需要先将数组进行排序,再比较两个数组是否相等。
试比较以下两行代码:
<script type="text/javascript">alert([1,2,3].toString()== [3,2,1].toString());alert([1,2,3].sort().toString()== [3,2,1].sort().toString()); </script>
2、对象对比:https://www.jianshu.com/p/90ed8b728975
① 方法一:通过JSON.stringfy(obj)
来判断两个对象转后的字符串是否相等
优点:用法简单,对于顺序相同的两个对象可以快速进行比较得到结果
缺点:这种方法有限制就是当两个对比的对象中key的顺序不是完全相同时会比较出错
② 方法二:
// 对Object扩展一个方法chargeObjectEqual
Object.prototype.chargeObjectEqual = function(obj){ // 当前Object对象 var propsCurr = Object.getOwnPropertyNames(this); // 要比较的另外一个Object对象 var propsCompare = Object.getOwnPropertyNames(obj); if (propsCurr.length != propsCompare.length) { return false; } for (var i = 0,max = propsCurr.length; i < max; i++) { var propName = propsCurr[i]; if (this[propName] !== obj[propName]) { return false; } } return true; }
getOwnPropertyNames
该方法可以将Object对象的第一层key获取到并返回一个由第一层key组成的数组。
优点:相对方法一进行了优化,可以应对不同顺序的Object进行比较,不用担心顺序不同而对比出错
缺点:从方法中可以看到只能获取到第一层的key组成的数组,当对象是复合对象时无法进行多层对象的比较
③ 方法三:
function deepCompare(x, y) { var i, l, leftChain, rightChain; function compare2Objects(x, y) { var p; // remember that NaN === NaN returns false // and isNaN(undefined) returns true if (isNaN(x) && isNaN(y) && typeof x === 'number' && typeof y === 'number') { return true; } // Compare primitives and functions. // Check if both arguments link to the same object. // Especially useful on the step where we compare prototypes if (x === y) { return true; } // Works in case when functions are created in constructor. // Comparing dates is a common scenario. Another built-ins? // We can even handle functions passed across iframes if ((typeof x === 'function' && typeof y === 'function') || (x instanceof Date && y instanceof Date) || (x instanceof RegExp && y instanceof RegExp) || (x instanceof String && y instanceof String) || (x instanceof Number && y instanceof Number)) { return x.toString() === y.toString(); } // At last checking prototypes as good as we can if (!(x instanceof Object && y instanceof Object)) { return false; } if (x.isPrototypeOf(y) || y.isPrototypeOf(x)) { return false; } if (x.constructor !== y.constructor) { return false; } if (x.prototype !== y.prototype) { return false; } // Check for infinitive linking loops if (leftChain.indexOf(x) > -1 || rightChain.indexOf(y) > -1) { return false; } // Quick checking of one object being a subset of another. // todo: cache the structure of arguments[0] for performance for (p in y) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } } for (p in x) { if (y.hasOwnProperty(p) !== x.hasOwnProperty(p)) { return false; } else if (typeof y[p] !== typeof x[p]) { return false; } switch (typeof(x[p])) { case 'object': case 'function': leftChain.push(x); rightChain.push(y); if (!compare2Objects(x[p], y[p])) { return false; } leftChain.pop(); rightChain.pop(); break; default: if (x[p] !== y[p]) { return false; } break; } } return true; } if (arguments.length < 1) { return true; //Die silently? Don't know how to handle such case, please help... // throw "Need two or more arguments to compare"; } for (i = 1, l = arguments.length; i < l; i++) { leftChain = []; //Todo: this can be cached rightChain = []; if (!compare2Objects(arguments[0], arguments[i])) { return false; } } return true; }
深度对比两个对象是否完全相等,可以封装成一个组件方便随时调用。
作者:木A木
链接:https://www.jianshu.com/p/90ed8b728975
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
转载于:https://www.cnblogs.com/MisterHe/p/10333907.html
javascript的对象内容对比相关推荐
- JavaScript 复制对象与Object.assign方法无法实现深复制
在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复 ...
- javascript定义对象写法(个人整理)
javascript定义对象的几种简单方法 1.构造函数方式,全部属性及对象的方法都放在构造方法里面定义 优点:动态的传递参数 缺点:每创建一个对象就会创建相同的方法函数对象,占用大量内存 funct ...
- JavaScript Object对象
原文:JavaScript Object对象 Object对象 1. 介绍 Object对象,是所有JavaScript对象的超类(基类).Object.prototype(Obecjt的原型)定义了 ...
- JavaScript系列-----对象基于哈希存储(Key,Value之Key篇) (1)
1.Hash表的结构 首先,允许我们花一点时间来简单介绍hash表. 1.什么是hash表 hash表是一种二维结构,管理着一对对<Key,Value>这样的键值对,Hash表的结构如下图 ...
- MoCo不适用于目标检测?MSRA提出对象级对比学习的目标检测预训练方法SoCo!性能SOTA!(NeurIPS 2021)...
关注公众号,发现CV技术之美 本文分享 NeurIPS 2021 论文『Aligning Pretraining for Detection via Object-Level Contrastive ...
- php 改变页面元素,动态更改网页HTML元素(对象)内容_经验交流
动态HTML的出现为用户提供了一种基于传统标准HTML来创建交互式页面的机制.本文主要针对IE 5.0谈谈如何通过其提供的HTML文档对象(DOM)模型使用脚本添加.删除.修改页面中的HTML元素(对 ...
- JavaScript的对象、属性与方法
目录 一.JavaScript的预解析 二 .JavaScript的对象(面向对象编程) 1.对象:是一种数据类型.是属性和方法的集合 (1)属性:是对象的静态特征 (2)方法(函数):是对象的动态特 ...
- 【JS】javascript正则表达式的基本使用(JavaScript RegExp 对象)
javascript正则表达式的基本使用(JavaScript RegExp 对象) 1. 正则表达式是什么? 2. 基本使用语法 2.1 正则表达式思维导图 2.2 定义正则表达式 2.2.1 普通 ...
- JSON内容对比工具
一款基于Java的JSON内容对比工具类,结合Jackson一起使用 Maven依赖: <dependency><groupId>com.flipkart.zjsonpatch ...
- JavaScript __ 对象小记
JavaScript __ 对象小记 文章目录 JavaScript __ 对象小记 前言 一.对象的组成 二.JavaScript中的三种对象 1.自定义对象 三种创建对象的方法 1)字面量创建对象 ...
最新文章
- Python设计模式-中介者模式
- Safari、IE浏览器出现允许改写地址栏的漏洞
- Android端WEEX + HTTPDNS 最佳实践
- 在VMware Workstation上安装Kali Linux
- 选择select 标签中指定值的option
- 关于Nginx的server_name。
- 4300 字Python列表使用总结,用心!
- python硬件编程_Python学习日记_《Python硬件编程实战》笔记_Mr_Ouyang
- 统计通话次数和时间的软件_通话时间统计app下载-通话时间统计v2.5 安卓版-腾牛安卓网...
- 拼多多新店铺上架多少宝贝合适?是越多越好吗?
- 使用thinkadmin内置WeChatDeveloper发送公众号模板消息
- python 操作word 修改页眉与页脚
- 安防4G摄像头互联网直播视频流媒体服务器EasyNVR硬件盒子设置固定IP后设备重启无法再次发现设备的问题
- 小程序源码:求职招聘微信小程序源码下载v4.1.78
- 大豆SNP位点信息查找V2.1版本
- 白苹果了怎么办_iOS 13如何降级?iOS13降级失败怎么办?
- Python光大证券中文云系统——爬取新浪财经新闻
- 自然辩证法作业--科学与技术的关系
- 简单粒子群优化算法的函数寻优
- nlp(贪心学院)——时序模型、HMM、隐变量模型、EM算法
热门文章
- Redis performance --- delete 100 records at maximum
- 转:HashMap实现原理分析(面试问题:两个hashcode相同 的对象怎么存入hashmap的)...
- Vue2.0七——生命周期
- MySQL之 视图,触发器,事物,存储过程,函数(Day48)
- Python字典对象实现原理
- Iptables基本概念及应用
- 2005年7月19日
- 零偏,零偏稳定性和零偏重复性,IMU误差模型
- glob-parent Regular expression denial ofservice
- sshpass-Linux命令之非交互SSH密码验证