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 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
vue+axios+promise实际开发用法详解
Oct 15 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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php中define用法实例
2015/07/30 PHP
php 可变函数使用小结
2018/06/12 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
简述Matlab中size()函数的用法
2016/03/20 Javascript
javascript实现下雪效果【实例代码】
2016/05/03 Javascript
jQuery限制图片大小的方法
2016/05/25 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python中有趣在__call__函数
2015/06/21 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
Python的时间模块datetime详解
2017/04/17 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
财产公证书
2014/04/10 职场文书
机关办公室岗位职责
2014/04/16 职场文书
小学生操行评语
2014/04/22 职场文书
服务承诺书格式
2014/05/21 职场文书
研究生求职自荐书
2014/06/23 职场文书
特岗教师个人总结
2015/02/10 职场文书
Vue2.0搭建脚手架
2022/03/13 Vue.js
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
MySQL的存储过程和相关函数
2022/04/26 MySQL