JS中如何比较两个Json对象是否相等实例代码


Posted in Javascript onJuly 13, 2016

在js前端面试过程中,经常会遇到这样的笔试题:JS中如何比较两个Json对象是否相等实例代码,下面小编抽点时间给大家整理下,一起看看吧。

1.先准备三个工具方法,用于判断是否是对象类型,是否是数组,获取对象长度

function isObj(object) {
return object && typeof (object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
}
function isArray(object) {
return object && typeof (object) == 'object' && object.constructor == Array;
}
function getLength(object) {
var count = 0;
for (var i in object) count++;
return count;
}

2.准备两个相同或不同的Json对象

var jsonObjA = {
"Name": "MyName",
"Company": "MyCompany",
"Infos": [
{ "Age": "100" },
{
"Box": [
{ "Height": "100" },
{ "Weight": "200" }
]
}
],
"Address": "马栏山"
}
var jsonObjB = {
"Name": "MyName",
"Company": "MyCompany",
"Infos": [
{ "Age": "100" },
{
"Box": [
{ "Height": "100" },
{ "Weight": "200" }
]
}
],
"Address": "马栏山二号"
}

3.主要的代码

function Compare(objA, objB) {
if (!isObj(objA) || !isObj(objB)) return false; //判断类型是否正确
if (getLength(objA) != getLength(objB)) return false; //判断长度是否一致
return CompareObj(objA, objB, true);//默认为true
}
function CompareObj(objA, objB, flag) {
for (var key in objA) {
if (!flag) //跳出整个循环
break;
if (!objB.hasOwnProperty(key)) { flag = false; break; }
if (!isArray(objA[key])) { //子级不是数组时,比较属性值
if (objB[key] != objA[key]) { flag = false; break; }
} else {
if (!isArray(objB[key])) { flag = false; break; }
var oA = objA[key], oB = objB[key];
if (oA.length != oB.length) { flag = false; break; }
for (var k in oA) {
if (!flag) //这里跳出循环是为了不让递归继续
break;
flag = CompareObj(oA[k], oB[k], flag);
}
}
}
return flag;
}

4.调用方法

var result = Compare(jsonObjA, jsonObjB);
console.log(result); // true or false
Javascript 相关文章推荐
一个简单的jQuery插件制作 学习过程及实例
Apr 25 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 #Javascript
原生js仿jquery animate动画效果
Jul 13 #Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 #Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 #Javascript
Javascript类型系统之undefined和null浅析
Jul 13 #Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 #Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 #Javascript
You might like
在JavaScript中调用php程序
2009/03/09 PHP
php读取3389的脚本
2014/05/06 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
记React connect的几种写法(小结)
2018/09/18 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python各层级目录下import方法代码实例
2020/01/20 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Django如何批量创建Model
2020/09/01 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
二手书店创业计划书
2014/01/16 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
文化活动实施方案
2014/03/28 职场文书
药学职务聘任书
2014/03/29 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
学校党支部承诺书
2015/04/30 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python