EnlightenCode

对象浅比较 🔍 ​

什么是对象浅比较？ ​

对象浅比较是指只比较对象的第一层属性值是否相等，不会递归比较嵌套的对象。这在 React 等框架中经常用于性能优化。

实现原理 💡 ​

  1. 首先检查两个参数是否为对象
  2. 检查是否为同一引用
  3. 比较两个对象的属性数量
  4. 逐一比较第一层属性的值

代码实现 ⌨️ ​

js
// 检测是否为对象
const isObject = function isObject(obj) {
    return obj !== null && /^(object|function)$/.test(typeof obj);
};

// 对象浅比较的方法
const shallowEqual = function shallowEqual(objA, objB) {
    // 1. 基础类型或非对象直接返回 false
    if (!isObject(objA) || !isObject(objB)) return false;
    
    // 2. 引用相同直接返回 true
    if (objA === objB) return true;
    
    // 3. 比较属性数量
    const keysA = Reflect.ownKeys(objA);
    const keysB = Reflect.ownKeys(objB);
    if (keysA.length !== keysB.length) return false;
    
    // 4. 浅比较每个属性
    for (let i = 0; i < keysA.length; i++) {
        const key = keysA[i];
        if (!objB.hasOwnProperty(key) || !Object.is(objA[key], objB[key])) {
            return false;
        }
    }
    
    return true;
};

使用示例 🌟 ​

js
// 基础示例
const obj1 = { name: 'John', age: 30 };
const obj2 = { name: 'John', age: 30 };
const obj3 = { name: 'John', age: 31 };

console.log(shallowEqual(obj1, obj2)); // true
console.log(shallowEqual(obj1, obj3)); // false

// 特殊情况处理
console.log(shallowEqual({ a: NaN }, { a: NaN })); // true
console.log(shallowEqual({ a: undefined }, { b: undefined })); // false

注意事项 ⚠️ ​

  1. 浅比较只比较第一层属性，对于嵌套对象无法进行深度比较
  2. 使用 Object.is() 可以正确处理 NaN 的比较
  3. 使用 Reflect.ownKeys() 可以获取包括 Symbol 在内的所有自有属性
  4. 性能考虑：浅比较适用于简单对象的比较，对于复杂对象可能需要考虑深比较

实际应用场景 🎯 ​

  1. React 组件优化：
js
// React 中的使用示例
shouldComponentUpdate(nextProps) {
    return !shallowEqual(this.props, nextProps);
}
  1. Redux 连接器的性能优化
  2. 缓存比较
  3. 状态管理工具中的变更检测

扩展阅读 📚 ​

  • 深比较 (Deep Equal) 的实现
  • React.memo 和 shallowEqual
  • Immutable.js 与对象比较