两个对象比较有哪几种方式
Object 类型的比较是非常重要的基础知识，这里可以总结为四种方法：引用对比、手动对比、浅对比、深对比。
引用对比
下面三种对比方式用于 Object，皆在引用相同是才返回 true：
=====Object.is()
const hero1 = {
name: "Batman",
};
const hero2 = {
name: "Batman",
};
hero1 === hero1; // => true
hero1 === hero2; // => false
hero1 == hero1; // => true
hero1 == hero2; // => false
Object.is(hero1, hero1); // => true
Object.is(hero1, hero2); // => false
手动对比
写一个自定义函数，按照对象内容做自定义对比也是一种方案：
function isHeroEqual(object1, object2) {
return object1.name === object2.name;
}
const hero1 = {
name: "Batman",
};
const hero2 = {
name: "Batman",
};
const hero3 = {
name: "Joker",
};
isHeroEqual(hero1, hero2); // => true
isHeroEqual(hero1, hero3); // => false
如果要对比的对象 key 不多，或者在特殊业务场景需要时，这种手动对比方法其实还是蛮实用的。
但这种方案不够自动化，所以才有了浅对比。
浅对比
浅对比函数写法有很多，不过其效果都是标准的，下面给出了一种写法：
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
可以看到，浅对比就是将对象每个属性进行引用对比，算是一种性能上的平衡，尤其在 redux 下有特殊的意义。
下面给出了使用例子：
const hero1 = {
name: "Batman",
realName: "Bruce Wayne",
};
const hero2 = {
name: "Batman",
realName: "Bruce Wayne",
};
const hero3 = {
name: "Joker",
};
shallowEqual(hero1, hero2); // => true
shallowEqual(hero1, hero3); // => false
如果对象层级再多一层，浅对比就无效了，此时需要使用深对比。
深对比
深对比就是递归对比对象所有简单对象值，遇到复杂对象就逐个 key 进行对比，以此类推。
下面是一种实现方式：
function deepEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (const key of keys1) {
const val1 = object1[key];
const val2 = object2[key];
const areObjects = isObject(val1) && isObject(val2);
if (
(areObjects && !deepEqual(val1, val2)) ||
(!areObjects && val1 !== val2)
) {
return false;
}
}
return true;
}
function isObject(object) {
return object != null && typeof object === "object";
}
可以看到，只要遇到 Object 类型的 key，就会递归调用一次 deepEqual 进行比较，否则对于简单类型直接使用 !== 引用对比。
值得注意的是，数组类型也满足 typeof object === "object" 的条件，且 Object.keys 可以作用于数组，且 object[key] 也可作用于数组，因此数组和对象都可以采用相同方式处理。
有了深对比，再也不用担心复杂对象的比较了：
const hero1 = {
name: "Batman",
address: {
city: "Gotham",
},
};
const hero2 = {
name: "Batman",
address: {
city: "Gotham",
},
};
deepEqual(hero1, hero2); // => true
但深对比会造成性能损耗，不要小看递归的作用，在对象树复杂时，深对比甚至会导致严重的性能问题。
评论
还没有评论...留下你的评论!