JS创建二维数组：为什么Array(n).fill([])会导致数据联动

主题：内存模型与数组实例化 适用场景：算法矩阵 / 游戏棋盘 / 动态规划网格

在 JavaScript 中，执行 const arr = Array(n).fill([]) 会导致修改其中任意一行时所有行同时被修改。根本原因在于：Array.prototype.fill() 仅对传入的参数执行一次求值并复制其值。因为数组是引用类型，所以该方法把同一个堆内存地址浅拷贝到了每一个外层槽位中。本文将直观拆解这种内存共享过程，并提供 3 种安全高效的替代方案。

一、现象复现：看似简洁的代码与意外的数据联动

在编写算法题（如动态规划状态转移表、广度优先搜索迷宫）或开发网格棋盘业务时，我们需要快速构建一个固定行列大小的二维数组。许多开发者为了书写简练，直觉上会选择组合使用 Array(n) 构造器与 fill() 方法：

// 创建一个包含 3 行的二维数组，初始均为空数组
const matrix = Array(3).fill([]);

// 期望只在第一行插入数据 'A'
matrix[0].push('A');

// 输出整个矩阵观察结果
console.log(matrix);
// 实际打印输出：
// [ ['A'], ['A'], ['A'] ]

我们在代码中仅执行了 matrix[0].push('A')，按常理应该得到 [ ['A'], [], [] ]，但实际运行后，matrix[1] 和 matrix[2] 内部也莫名出现了 'A'。此时如果读取 matrix[2][0]，拿到的同样是 'A'。

二、深入底层：Array.prototype.fill 的传值与引用模型

为什么 matrix[0] 变动会波及全局？答案藏在 JavaScript 的函数参数求值时机与基本类型 vs 引用类型的内存差异中。

1. 函数实参的求值仅执行一次

当我们编写 fill([]) 时，JavaScript 引擎在执行 fill 函数前，会先对括号内的表达式 [] 进行求值。这个字面量 [] 触发了一次堆内存对象的实例化，生成了一个空数组实例，并在堆中分配了一个内存地址（例如 0x004F）。

随后，引擎将计算出来的地址值 0x004F 传递给 fill 函数。fill 方法内部并不是接收一个“创建数组的工厂规则”，而是接收已经存在的单一值，机械地将该值写入外层数组的每个索引槽中。

2. 基本类型安全 vs 引用类型浅拷贝

作为对比，当我们执行 Array(3).fill(0) 时，传入的是基本数据类型（Primitive Value）。数值 0 在内存中是按值直接存储在栈中的，每个槽位各自拥有一份独立的数值副本，修改 arr[0] = 5 自然不会影响 arr[1]。

但当参数是数组或对象这类引用类型（Reference Type）时，外层数组槽位存储的仅仅是指向同一个堆内存对象的指针。

我们可以用简单的恒等运算符（===）直接验证这个结论：

const testArr = Array(3).fill([]);

// 恒等比较的是内存指针地址
console.log(testArr[0] === testArr[1]); // 输出: true
console.log(testArr[1] === testArr[2]); // 输出: true

结果恒为 true，说明 testArr[0]、testArr[1] 和 testArr[2] 在底层指向同一个内存实体。matrix[0].push('A') 实际上是在修改该实体本身的内容。

三、避开稀疏数组陷阱：为什么 Array(n).map(() => []) 不起作用

有些读者在意识到需要多次执行 [] 后，会尝试使用数组映射方法 map：

// 尝试通过 map 返回新的数组字面量
const invalidMatrix = Array(3).map(() => []);

console.log(invalidMatrix);
// 打印输出: [ <3 empty items> ] (在 Node.js 中为 [ empty × 3 ])

四、正确创建二维数组的 3 种实用方案

要正确创建二维数组，核心原则必须是：每一行的子数组都必须在独立的生命周期内被执行实例化，从而分配互不相同的堆内存地址。

• 方案 1：使用 Array.from() 工厂函数（推荐首选）

  ES6 引入的 Array.from() 接收一个类数组对象（如 { length: rows }），并可直接接收第二个参数作为映射函数。该映射函数会严格针对 0 到 rows - 1 的每个索引依次调用，保证每次返回的都是全新的数组实例：

  const rows = 3;
  const cols = 4;
  
  // 创建 3 行 4 列，初始值全为 0 的独立二维数组
  const matrix = Array.from({ length: rows }, () => Array(cols).fill(0));
  
  matrix[0][0] = 99;
  console.log(matrix[0]); // [99, 0, 0, 0]
  console.log(matrix[1]); // [0, 0, 0, 0] (完全独立，未受影响)
  console.log(matrix[0] === matrix[1]); // false

• 方案 2：fill(null) 填充空槽后链式 map()

  如果习惯使用链式调用，可以先使用基本类型（如 null 或 0）填充数组，将稀疏数组的空插槽实体化，随后再调用 map()：

  // 先将 3 个槽位填充为 null，消除 empty slots，再映射生成新数组
  const matrix2 = Array(rows).fill(null).map(() => Array(cols).fill(0));
  
  matrix2[0].push(123);
  console.log(matrix2[1]); // 不受影响

• 方案 3：标准 for 循环逐行构造（极致性能首选）

  在需要处理数万级别的大型矩阵运算，或者在对执行性能极度敏感的算法场景中，传统 for 循环避免了高阶函数迭代与额外闭包开销，执行速度最快，意图也最直白：

  const matrix3 = [];
  for (let i = 0; i < rows; i++) {
    matrix3.push(new Array(cols).fill(0));
  }

五、方案综合对比与选型指南

为了帮助大家在日常开发和面试答题中迅速选型，下表对常见方式进行了多维度对比：

六、自查与单元验证方法

当你封装了矩阵生成工具函数，或者在团队工程中编写通用二维数据结构时，建议加入简单的断言或单元测试，确保内存隔离性：

function createMatrix(rows, cols, defaultValue = 0) {
  return Array.from({ length: rows }, () => Array(cols).fill(defaultValue));
}

// 验证函数：确保各行内存独立
function verifyMatrixIndependence(matrix) {
  if (matrix.length < 2) return true;
  for (let i = 0; i < matrix.length - 1; i++) {
    if (matrix[i] === matrix[i + 1]) {
      throw new Error(`检测到内存联动：行 ${i} 与行 ${i + 1} 引用了同一个数组实例！`);
    }
  }
  return true;
}

const m = createMatrix(3, 3);
console.log("验证结果:", verifyMatrixIndependence(m)); // 验证结果: true

通过理解底层引用模型，我们不仅能避开 Array(n).fill([]) 的数据联动陷阱，还能对 JavaScript 的函数求值、对象引用和稀疏数组机制建立更扎实的心智模型。