通过JS深度判断两个对象字段相同

 更新时间:2019年06月14日 10:39:01   作者:莫问今朝  
这篇文章主要介绍了通过JS深度判断两个对象字段相同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下

代码:

/**
* 判断此对象是否是Object类型
* @param {Object} obj 
*/
function isObject(obj){
return Object.prototype.toString.call(obj)==='[object Object]';
};
/**
* 判断此类型是否是Array类型
* @param {Array} arr 
*/
function isArray(arr){
return Object.prototype.toString.call(arr)==='[object Array]';
};
/**
* 深度比较两个对象是否相同
* @param {Object} oldData 
* @param {Object} newData 
*/
function equalsObj(oldData,newData){
// 类型为基本类型时,如果相同,则返回true
if(oldData===newData)return true;
if(isObject(oldData)&&isObject(newData)&&Object.keys(oldData).length === Object.keys(newData).length){
// 类型为对象并且元素个数相同
// 遍历所有对象中所有属性,判断元素是否相同
for (const key in oldData) {
if (oldData.hasOwnProperty(key)) {
if(!equalsObj(oldData[key],newData[key]))
// 对象中具有不相同属性 返回false
return false;
}
}
}else if(isArray(oldData)&&isArray(oldData)&&oldData.length===newData.length){
// 类型为数组并且数组长度相同
for (let i = 0,length=oldData.length; i <length; i++) {
if(!equalsObj(oldData[i],newData[i]))
// 如果数组元素中具有不相同元素,返回false
return false;
}
}else{
// 其它类型,均返回false
return false;
}
// 走到这里,说明数组或者对象中所有元素都相同,返回true
return true;
};

测试:

var oldArr = [1,2,
[
{
name:"张三",
age:11,
}
],
{
name:'李四',
age:21,
em:[
{
address:'邯郸',
phone:'123'
},
{
address:'北京',
phone:234
}
]
}
];
var newArr = [1,2,
[
{
name:"张三",
age:11
}
],
{
name:'李四',
age:21,
em:[
{
address:'邯郸',
phone:'123'
},
{
address:'北京',
phone:234
}
]
}
];
console.log(equalsObj(oldArr,newArr));

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js实现点击切换和自动播放的轮播图

    js实现点击切换和自动播放的轮播图

    这篇文章主要为大家详细介绍了js实现点击切换和自动播放的轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript复制内容到剪贴板的两种常用方法

    JavaScript复制内容到剪贴板的两种常用方法

    最近一个活动页面中有一个小需求,用户点击或者长按就可以复制内容到剪贴板,记录一下实现过程和遇到的坑,需要的朋友可以参考下
    2018-02-02
  • 微信小程序事件绑定传参冒泡及捕获的示例详解

    微信小程序事件绑定传参冒泡及捕获的示例详解

    这篇文章主要为大家介绍了微信小程序事件绑定传参冒泡及捕获的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • JavaScript中DOM和BOM的区别与用处详解

    JavaScript中DOM和BOM的区别与用处详解

    这篇文章主要介绍了JavaScript中DOM和BOM的区别与用处,DOM和BOM是前端开发中常用的两个概念,它们分别表示不同的对象模型,用于操作浏览器的不同部分,了解它们的区别和用处,有助于在前端开发中灵活使用 JavaScript 操作页面和浏览器,需要的朋友可以参考下
    2024-09-09
  • Javascript HTML5 Canvas实现的一个画板

    Javascript HTML5 Canvas实现的一个画板

    这篇文章主要为大家详细介绍了Javascript HTML5 Canvas实现的一个画板的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JavaScript实现列表分页功能特效

    JavaScript实现列表分页功能特效

    最近在做一个小项目,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手。
    2015-05-05
  • JavaScript中的Promise详解

    JavaScript中的Promise详解

    这篇文章主要介绍了JavaScript中的Promise使用详解,promise对象是JS进阶学习中的重要知识点,需要的朋友可以参考下
    2021-10-10
  • js HTML5 canvas绘制图片的方法

    js HTML5 canvas绘制图片的方法

    这篇文章主要为大家详细介绍了js HTML5 canvas绘制图片的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • es6函数之箭头函数用法实例详解

    es6函数之箭头函数用法实例详解

    这篇文章主要介绍了es6函数之箭头函数用法,结合实例形式详细分析了es6箭头函数基本功能、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JavaScript实现涂鸦笔功能

    JavaScript实现涂鸦笔功能

    这篇文章主要为大家详细介绍了JavaScript实现涂鸦笔功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论