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操纵Cookie实现购物车程序
Feb 15 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
js实现常见的工具条效果
Mar 02 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
详细分析jsonp的原理和实现方式
Nov 20 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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
我的论坛源代码(二)
2006/10/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
基于JS实现导航条flash导航条
2016/06/17 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
JS Testing Properties 判断属性是否在对象里的方法
2017/10/01 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
后勤副校长自我鉴定
2013/10/13 职场文书
大学班级学风建设方案
2014/05/01 职场文书
党员公开承诺书内容
2014/05/20 职场文书
预防传染病方案
2014/06/14 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
国庆节慰问信
2015/02/15 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
React更新渲染原理深入分析
2022/12/24 Javascript