js浅比较实现
浅比较的概念
浅比较（Shallow Comparison）是指比较两个对象或数组的顶层属性或元素是否相等，不递归比较嵌套结构。在JavaScript中，常用于性能优化场景，如React的shouldComponentUpdate或React.memo。
基本实现方法
function shallowEqual(objA, objB) {
if (Object.is(objA, objB)) return true;
if (
typeof objA !== 'object' ||
typeof objB !== 'object' ||
objA === null ||
objB === null
) {
return false;
}
const keysA = Object.keys(objA);
const keysB = Object.keys(objB);
if (keysA.length !== keysB.length) return false;
for (let i = 0; i < keysA.length; i++) {
if (
!Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
!Object.is(objA[keysA[i]], objB[keysA[i]])
) {
return false;
}
}
return true;
}针对数组的优化版本
function shallowCompareArray(arrA, arrB) {
if (arrA.length !== arrB.length) return false;
for (let i = 0; i < arrA.length; i++) {
if (!Object.is(arrA[i], arrB[i])) {
return false;
}
}
return true;
}使用场景示例
React组件优化中使用浅比较：
const MyComponent = React.memo(function MyComponent(props) {
// 组件内容
}, (prevProps, nextProps) => {
return shallowEqual(prevProps, nextProps);
});性能注意事项
- 浅比较比深比较性能更高，但可能遗漏嵌套结构的变化
- 对于大型对象，建议配合不可变数据模式使用
- 比较前可先检查引用相等性快速返回结果
边界情况处理
实现时需考虑以下特殊情况：
// NaN比较
Object.is(NaN, NaN); // true
// +0/-0比较
Object.is(+0, -0); // false
// 原型链属性忽略
const objA = { a: 1 };
const objB = Object.create({ a: 1 });
shallowEqual(objA, objB); // false以上实现提供了JavaScript中浅比较的核心逻辑，可根据具体需求调整比较策略。
