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 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
解决layui的table插件无法多层级获取json数据的问题
Sep 19 Javascript
swiper实现异形轮播效果
Nov 28 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
php tp验证表单与自动填充函数代码
2012/02/22 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
Javascript编写俄罗斯方块思路及实例
2015/07/07 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
2016/07/10 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
2017/04/26 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
ajax请求data遇到的问题分析
2018/01/18 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
详解Python中的日志模块logging
2015/06/19 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Django实现分页功能
2018/07/02 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python3图片文件批量重命名处理
2019/10/31 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
大型晚会策划方案
2014/02/06 职场文书
党员目标管理责任书
2014/07/25 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
2016中秋节广告语
2016/01/28 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书