TypeScript中如何判断两个含不同类型元素的数组是否相等？

问题原因 #

在JavaScript/TypeScript里，数组属于引用类型，===运算符比较的是变量指向的内存地址，而不是数组里的实际内容。哪怕两个数组元素完全一致，它们也是内存中两个独立的对象，所以props === propsCopied会返回false，导致你的if判断不生效。

解决方法 #

方法1：用JSON.stringify快速比较（适合元素为基本类型的场景）

如果数组里的元素都是字符串、布尔值这类基本类型，可以把两个数组转成JSON字符串后再比较：

let props:(string|boolean)[]=['abc','def',true,false,'xyz']
let propsCopied:(string|boolean)[]=['abc','def',true,false,'xyz']
let allPropsCopied:boolean;

if(JSON.stringify(props) === JSON.stringify(propsCopied)){
  allPropsCopied=true;
}

注意：这种方法有局限性——元素顺序不同会被判定为不同数组；如果数组里包含函数、undefined或者循环引用，JSON.stringify会处理出错或忽略这些元素。

方法2：自定义数组比较函数（灵活可控）

自己写一个函数，先比较数组长度，再逐个遍历元素对比，适合需要自定义比较逻辑的场景：

// 适用于元素为基本类型的数组
function arraysAreEqual<T>(arr1: T[], arr2: T[]): boolean {
  // 长度不一样直接返回false
  if (arr1.length !== arr2.length) return false;
  // 遍历每个元素逐一比较
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) return false;
  }
  return true;
}

// 使用示例
let props:(string|boolean)[]=['abc','def',true,false,'xyz']
let propsCopied:(string|boolean)[]=['abc','def',true,false,'xyz']
let allPropsCopied = arraysAreEqual(props, propsCopied); // 结果为true

如果数组里包含嵌套数组或对象，可以把函数改成递归版本，支持深度比较：

// 支持嵌套数组和对象的深度比较
function arraysAreEqual<T>(arr1: T[], arr2: T[]): boolean {
  if (arr1.length !== arr2.length) return false;
  
  for (let i = 0; i < arr1.length; i++) {
    const item1 = arr1[i];
    const item2 = arr2[i];

    // 嵌套数组递归比较
    if (Array.isArray(item1) && Array.isArray(item2)) {
      if (!arraysAreEqual(item1, item2)) return false;
    } 
    // 对象类型（排除null）递归比较
    else if (typeof item1 === 'object' && item1 !== null && typeof item2 === 'object' && item2 !== null) {
      if (!objectsAreEqual(item1, item2)) return false;
    } 
    // 基本类型直接比较
    else if (item1 !== item2) {
      return false;
    }
  }
  return true;
}

// 对象比较辅助函数
function objectsAreEqual(obj1: object, obj2: object): boolean {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  
  if (keys1.length !== keys2.length) return false;
  
  for (const key of keys1) {
    const val1 = (obj1 as any)[key];
    const val2 = (obj2 as any)[key];
    
    if (Array.isArray(val1) && Array.isArray(val2)) {
      if (!arraysAreEqual(val1, val2)) return false;
    } else if (typeof val1 === 'object' && val1 !== null && typeof val2 === 'object' && val2 !== null) {
      if (!objectsAreEqual(val1, val2)) return false;
    } else if (val1 !== val2) {
      return false;
    }
  }
  return true;
}

方法3：用Lodash的_.isEqual（适合项目已引入Lodash的场景）

如果你的项目已经在用Lodash库，可以直接用它的_.isEqual方法，它能自动处理各种类型的深度比较：

import _ from 'lodash';

let props:(string|boolean)[]=['abc','def',true,false,'xyz']
let propsCopied:(string|boolean)[]=['abc','def',true,false,'xyz']
let allPropsCopied = _.isEqual(props, propsCopied); // 结果为true

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