如何在JavaScript中判断两个对象数组是否相等？

在JavaScript中，数组和对象都属于引用类型，===运算符比较的是它们在内存中的引用地址，而非内容：

• listA和listB是两个独立创建的数组对象，内存地址不同，所以listA === listB返回false。
• 数组中的每个元素也是独立的对象实例，即使属性值完全一致，element === listB[index]比较的依然是对象的引用地址，因此结果也是false。

根据你的需求，提供几种可行的数组内容相等判断方法：

1. 手动比较对象属性（适合结构固定的场景） #

因为你的数组元素结构固定（只有id和color两个属性），可以直接在every方法中逐个比较属性值：

const checkArray = () => {
  const isSame = listA.length === listB.length && listA.every((element, index) => {
    const bItem = listB[index];
    return element.id === bItem.id && element.color === bItem.color;
  });
  console.log(isSame); // 输出true
};

2. 使用JSON.stringify（适合简单结构场景） #

将数组转换为JSON字符串后比较，适合元素结构简单、没有函数/undefined/循环引用的情况：

const checkArray = () => {
  const isSame = JSON.stringify(listA) === JSON.stringify(listB);
  console.log(isSame); // 输出true
};

⚠️ 注意：如果对象包含函数、undefined、Symbol，或者属性顺序不同（JSON.stringify会保留属性顺序），这种方法可能会得到错误结果。

3. 自定义深度比较函数（适合复杂结构场景） #

如果你的数组元素结构可能变化或更复杂，可以写一个递归的深度比较函数，实现任意引用类型的内容比较：

function deepEqual(a, b) {
  // 基本类型或同一引用直接返回true
  if (a === b) return true;
  // 排除非对象或null的情况
  if (typeof a !== 'object' || a === null || typeof b !== 'object' || b === null) {
    return false;
  }
  // 比较键的数量
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);
  if (keysA.length !== keysB.length) return false;
  // 递归比较每个键的值
  for (const key of keysA) {
    if (!keysB.includes(key) || !deepEqual(a[key], b[key])) {
      return false;
    }
  }
  return true;
}

const checkArray = () => {
  const isSame = listA.length === listB.length && listA.every((item, index) => deepEqual(item, listB[index]));
  console.log(isSame); // 输出true
};

内容的提问来源于stack exchange，提问作者Haksatrya Bhaswara