前端小技巧: 实现一个比较两个对象是否相等的方法_lodash对比两个对象是否一致-优快云博客

思路

实现两个对象的深度比较，模拟 lodash.isEqual() 写出一个简单的方案
地址不一样，属性一样，判定相等

要求

基于以下示例，来判定是否相等

// obj1 和 job2 完全一致
const obj1 = {a:10, b: {x: 100, y： 200}};
const obj2 = {a:10, b: {x: 100, y： 200}};

console.log(isEqual(obj1, obj2)）// true

isEqual() 实现

// 判断是否是对象或数组
function isObject(obj) {
    return obj && (typeof obj === 'object');
}

// 全相等（深度）
function isEqual(obj1, obj2) {
	// 值类型（注意，参与 equal 的一般不会是函数）函数不考虑
    if (!isObject(obj1) || !isObject(obj2)) return obj1 === obj2;
    // 允许 obj1 === obj1的情况
    if (obj1 === obj2) return true;
    // 两个都是对象或数组，而且不相等
    // 1. 先取出 obj1 和 obj2 的 keys ，比较个数
    const obj1Keys = Object.keys(obj1);
    const obj2Keys = Object.keys(obj2);
    // 属性个数不同，不全等，包括数组
    if (obj1Keys.length !== obj2Keys.length) return false;
    // 2. 遍历来进行比较，记录最终的 boolean 变量
    let flag = true; // 默认为true
    const keys = Object.keys(obj1);
    keys.some((key) => {
    	// 以 obj1 为基准，和 obj2 一次递归比较
    	const flag = isEqual(obj1[key], obj2[key]);
    	if (!flag) {
    		flag = false;
    		return true;
    	}
    })
    // 3. 返回 flag
    return flag;
}

对于对象属性的处理，递归是一个非常好的方式
对属性的遍历 Object.keys 不会访问原型链上的属性
- 如需处理原型链上的东西，请使用 for - in 替代
- 一般而言，不需要处理原型链的对比, 这样会提升性能

代码测试


// 测试
const obj1 = { a: 100,  b: {x:  100, y: 200 } };
const obj2 = { a: 100,  b: {x:  100, y: 200 } };

console.log( obj1 === obj2 ) // false
console.log( isEqual(obj1, obj2) ) // true

const arr1 = [1, 2, 3, 4, [5, [6, 7]]];
const arr2 = [1, 2, 3, 4, [5, [6, 7]]];
console.log(arr1 === arr2); // false
console.log( isEqual(arr1, arr2) ) // true