当前位置：首页 > JavaScript

js浅比较实现

2026-02-03 00:26:44JavaScript

浅比较的概念

浅比较（Shallow Comparison）是指比较两个对象或数组的顶层属性或元素是否相等，不递归比较嵌套结构。在JavaScript中，常用于性能优化场景，如React的shouldComponentUpdate或React.memo。

js浅比较实现

基本实现方法

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组件优化中使用浅比较：

js浅比较实现

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中浅比较的核心逻辑，可根据具体需求调整比较策略。

标签: js