Vue中如何判断两个数组是否相等？使用===比较失效该怎么解决

为什么===判断不生效 #

数组属于JavaScript引用类型，===运算符对比的是两个变量指向的内存地址是否相同，而非数组内部的元素值。你声明的A和B是两个独立的数组实例，指向不同的内存地址，所以即使元素完全一致，A === B也会返回false。

实现方案 #

方案1：基础类型一维数组（元素为字符串、数字、布尔值等，无嵌套） #

优先做前置校验减少不必要计算，再逐位对比元素：

// 数组相等判断工具函数
function isArrayEqual(arr1, arr2) {
  // 非数组参数直接返回不相等
  if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false
  // 长度不一致直接返回不相等
  if (arr1.length !== arr2.length) return false
  // 逐位对比元素
  for (let i = 0; i < arr1.length; i++) {
    // 用Object.is兼容NaN的对比场景
    if (!Object.is(arr1[i], arr2[i])) return false
  }
  return true
}

// 业务中使用
if(isArrayEqual(A, B)) {
  console.log('EQUAL')
} else {
  console.log('NOT EQUAL')
}

如果确认数组不会出现NaN元素，也可以直接用===替换Object.is做对比。

方案2：包含嵌套对象/数组的复杂结构数组 #

如果数组元素是对象、嵌套数组等复杂引用类型，需要用深度对比逻辑：

• Vue 3 可直接使用框架内置的深度比较方法，从@vue/shared包引入isEqual即可，该方法会递归对比所有层级的属性值，无需自行实现兼容逻辑：

import { isEqual } from '@vue/shared'

console.log(isEqual(A, B)) // 输出true

• Vue 2 场景下可以自行实现深度比较函数，也可以引入通用工具库的深比较方法，使用逻辑和上述示例一致。

内容的提问来源于stack exchange，提问作者Angkasa Olrenza