之前做的json比对工具,由于数据量比较多,所以比较的时候会导致浏览器很卡顿,所以就想着先比对,把不同的返回再渲染。
首先先定义深度比对数组或者对象,一致返回true,不一致返回false
/**
* 判断此对象是否是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;
};
其次是根据js的字典应用将其id不同的以及没有的id返回
function Getdifferent(json1, json2, key1) {
for (var key in json1) {
//循环遍历删除相同的属性,返回不同的
if (json2[key] != null && json1[key] != null && key == key1) {
//定义字典,将其id作为索引
var dic1 = new Array()
var dic2 = new Array()
for (let i = 0; i < json2[key].length; i++) {
dic2[json2[key][i].id] = json2[key][i]
}
for (let i = 0; i < json1[key].length; i++) {
dic1[json1[key][i].id] = json1[key][i]
}
console.log(dic1, dic2)
for (var key in dic1) {
//判断是否dic2是否含有该id
if (dic2[key]) {
if (equalsObj(dic1[key], dic2[key])) {
delete dic1[key]
delete dic2[key]
}
}
json1[key1] = dic1
json2[key1] = dic2
}
}
}
return {
json1,
json2
}
}