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实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
WebWorker 封装 JavaScript 沙箱详情
Nov 02 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 Pear 安装及使用
2009/03/19 PHP
PHP生成UTF8文件的方法
2010/05/15 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
JS实现瀑布流布局
2017/10/21 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
Python操作列表之List.insert()方法的使用
2015/05/20 Python
Python多进程机制实例详解
2015/07/02 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python图像处理入门(一)
2019/04/04 Python
keras的三种模型实现与区别说明
2020/07/03 Python
医学生求职自荐信
2013/10/25 职场文书
德语专业求职信
2014/03/12 职场文书
审计专业自荐信范文
2014/04/21 职场文书
学习教师法的心得体会
2014/09/03 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
个人年度总结报告
2015/03/09 职场文书
新郎父母婚礼致辞
2015/07/27 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript
golang连接MySQl使用sqlx库
2022/04/14 Golang