问题现象：为什么我的数组比较总是 false？

在 TypeScript 开发中，许多开发者会遇到一个令人困惑的现象：明明两个嵌套数组看起来内容完全一样，但使用 === 或 == 比较时却总是返回 false。

typescript
const arr1 = [1, [2, 3]];
const arr2 = [1, [2, 3]];

console.log(arr1 === arr2); // false
console.log(arr1[1] === arr2[1]); // false

这个看似简单的比较问题，背后隐藏着 JavaScript/TypeScript 中关于引用类型的核心机制。

根源分析：引用类型的内存模型

要理解这个问题，必须深入理解 JavaScript 的内存模型：

1. 基本类型（Primitive types）：直接存储在栈内存中，比较的是实际值

   
   
   
   • 包括：number, string, boolean, null, undefined, symbol, bigint

2. 引用类型（Reference types）：栈内存存储的是堆内存地址，比较的是引用地址

   
   
   
   • 包括：Object, Array, Function, Date 等

当创建 arr1 和 arr2 时：
- 每个数组都会在堆内存中分配新的空间
- 即使内容相同，它们的引用地址也不同
- 嵌套数组 [2,3] 也会被创建为新的独立对象

解决方案大全

方法1：JSON 序列化比较（简单但有限）

typescript function compareArrays(a: any[], b: any[]): boolean { return JSON.stringify(a) === JSON.stringify(b); }

缺点：
- 无法处理包含 undefined、函数或循环引用的数组
- 属性顺序改变会导致误判
- 性能较差（需要序列化整个结构）

方法2：递归深度比较（可靠方案）

typescript
function deepEqual(a: any, b: any): boolean {
if (a === b) return true;

if (typeof a !== 'object' || a === null ||
typeof b !== 'object' || b === null) {
return false;
}

if (Array.isArray(a)) {
if (!Array.isArray(b) || a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (!deepEqual(a[i], b[i])) return false;
}
return true;
}

// 处理普通对象...
}

方法3：使用现成工具库

• Lodash 的 _.isEqual
typescript import { isEqual } from 'lodash'; console.log(isEqual(arr1, arr2)); // true

• Underscore 的 _.isEqual

• Ramda 的 equals

方法4：自定义比较函数（针对特定场景）

当只需要比较特定结构时，可以编写针对性更强的比较函数：

typescript
function compareMatrix(matrix1: number[][], matrix2: number[][]): boolean {
if (matrix1.length !== matrix2.length) return false;

return matrix1.every((row, i) => {
if (row.length !== matrix2[i].length) return false;
return row.every((val, j) => val === matrix2[i][j]);
});
}

性能优化技巧

对于大型嵌套数组的比较，性能至关重要：

1. 先比较长度：数组长度不同直接返回 false
2. 引用相等短路：如果引用相同直接返回 true
3. 类型检查优先：类型不同无需深度比较
4. 备忘录模式：避免循环引用导致的无限递归

typescript
function deepEqualWithMemo(a: any, b: any, memo = new WeakMap()): boolean {
if (a === b) return true;

// 处理循环引用
if (memo.has(a) && memo.get(a) === b) return true;
memo.set(a, b);

// 其余比较逻辑...
}

实际应用场景

1. React 的 props 比较：React.memo 和 shouldComponentUpdate 依赖浅比较
2. 状态管理：Redux 的 reducer 需要正确处理嵌套状态更新
3. 测试断言：单元测试中期望结果与实际结果的深度比较
4. 数据变更检测：监控表单数据是否被修改

最佳实践建议

1. 优先考虑使用不可变数据（Immutable.js）
2. 设计数据结构时尽量扁平化
3. 对于频繁比较的场景，使用哈希值或版本号
4. 在 TypeScript 中明确类型定义有助于比较逻辑的编写

高级话题：Structural Typing 的影响

TypeScript 的结构类型系统（Structural Typing）不会影响运行时的比较行为。即使两个变量类型兼容，实际比较时仍然遵循 JavaScript 的引用比较规则：

typescript
interface Vector { x: number; y: number; }

const v1: Vector = { x: 1, y: 2 };
const v2 = { x: 1, y: 2 };

console.log(v1 === v2); // 仍然是 false

总结

理解 TypeScript 中嵌套数组比较返回 false 的问题，关键在于掌握引用类型的比较机制。在实际开发中：

• 简单场景可使用 JSON.stringify
• 复杂场景推荐使用 Lodash 等成熟库
• 性能敏感场景应实现定制化的深度比较
• 良好的数据结构设计能从根本上减少比较需求

掌握这些知识后，你将能更自信地处理 JavaScript/TypeScript 中的各种复杂比较场景。