JavaScript怎么正确初始化指定行列的二维数组

一、经典陷阱：为什么不能直接嵌套 Array.fill()？

初学者在尝试快速创建二维数组时，往往会自然而然地写出如下代码：

// 常见错误写法：嵌套使用 Array.fill
const rows = 3;
const cols = 4;
const matrix = new Array(rows).fill(new Array(cols).fill(0));

// 尝试仅修改第 0 行第 0 列的元素
matrix[0][0] = 9;

console.log(matrix);
// 输出结果：
// [
//   [9, 0, 0, 0],
//   [9, 0, 0, 0],  <-- 第 1 行也被改变了！
//   [9, 0, 0, 0]   <-- 第 2 行也被改变了！
// ]

这段代码表面上创建出了一个 3 行 4 列全为 0 的矩阵，但只要修改 matrix[0][0]，读者会惊讶地发现，每一行的第 0 列全部同时变成了 9。

产生这一故障的根源在于 JavaScript 的参数求值机制与对象引用传递模型：

• 在执行 .fill(new Array(cols).fill(0)) 时，作为参数的表达式 new Array(cols).fill(0) 会首先被执行，并在堆内存（Heap Memory）中实例化出唯一一个长度为 4 的数组对象。
• 随后，外层 Array.prototype.fill(value) 开始工作。当传入的 value 是对象、数组等复合引用类型时，fill 执行的是浅拷贝（Shallow Copy），即把该对象在内存中的指针地址复制到外层数组的每个槽位。
• 因此，外层数组的 matrix[0]、matrix[1] 和 matrix[2] 实际上都指向同一个内存地址。无论通过哪个索引进行属性读写，操作的都是同一个内层数组实例。

二、标准初始化流程与解题思维

要正确初始化二维数组，核心目标是让每一行的内层数组都在独立的时刻被单独创建。为了保证代码在生产环境中的健壮性，建议遵循四步闭环流程：

1. 规格校验：确认 rows 和 cols 为大于等于 0 的整数，避免传入负数或非法浮点数导致 RangeError: Invalid array length。
2. 构建无空槽的外层容器：避免使用带有稀疏空洞（Holey / Empty Slots）的结构，确保迭代器能够逐行被触发。
3. 通过工厂回调延迟实例化：将内层数组的创建逻辑封装在映射函数（Mapping Function）中，使外层数组每遍历一行，映射函数就重新执行一次 new Array()。
4. 独立性断言验证：编写单元测试或在本地快速给 matrix[0][0] 赋特定值，确认 matrix[1][0] 保持原样，验证各行之间的内存隔离。

三、三种主流且安全的实现方案

方案 1：Array.from() 映射工厂模式（现代首选，推荐）

Array.from() 是 ES2015 引入的静态方法。它接受一个类数组对象（例如 { length: rows }）作为第一个参数，以及一个映射回调函数作为第二个参数：

/**
 * 创建指定行数、列数并填充默认值的二维数组
 * @param {number} rows - 行数
 * @param {number} cols - 列数
 * @param {*} initialValue - 默认填充值（标量常量）
 * @returns {Array<Array>}
 */
function createMatrix(rows, cols, initialValue = 0) {
  return Array.from({ length: rows }, () => Array(cols).fill(initialValue));
}

// 验证独立性
const grid = createMatrix(3, 4, 0);
grid[0][0] = 7;
console.log(grid[0]); // [7, 0, 0, 0]
console.log(grid[1]); // [0, 0, 0, 0] （完全独立，未受影响）

为什么这种写法既优雅又安全？
Array.from({ length: rows }) 能够直接定义一个可枚举的、具有指定长度的序列；而第二参数 () => Array(cols).fill(...) 是一个函数引用，外层有多少行，该函数就会被调用多少次。每一次调用都在堆内存中新建了一个全新的内层数组，因此各行互不相干。

方案 2：经典双层 for 循环（极致性能与超大规模矩阵首选）

如果正在编写高频调用的物理引擎、大型网格地图计算（例如 1000 × 1000 以上）或算法竞赛题目，传统的命令式 for 循环能带来最直接的性能收益和最小的内存分配开销：

function createMatrixFast(rows, cols, initialValue = 0) {
  const matrix = new Array(rows);
  for (let r = 0; r < rows; r++) {
    const row = new Array(cols);
    for (let c = 0; c < cols; c++) {
      row[c] = initialValue;
    }
    matrix[r] = row;
  }
  return matrix;
}

双层 for 循环没有高阶函数的闭包创建开销，V8 引擎的 TurboFan JIT 编译器能够将其优化为极其紧凑的机器码指令。对于超密集数组，这是执行速度最快的方式。

方案 3：链式 Array(rows).fill(null).map(...)（函数式写法）

部分团队习惯使用链式数组方法。这里有一个极容易被忽视的语言特性细节：

// 错误变体：直接使用 map
const wrong = new Array(rows).map(() => new Array(cols).fill(0));
console.log(wrong); // [ <3 empty items> ]，回调完全没有被执行！

// 正确写法：必须先用 fill 填充空位
const matrix = new Array(rows)
  .fill(null)
  .map(() => new Array(cols).fill(0));

原理深度剖析：new Array(rows) 创建的是一个稀疏数组（Sparse Array），其内部由连续的空槽位（empty slots / holey elements）构成。根据 ECMAScript 规范，Array.prototype.map()、forEach() 等高阶方法会自动跳过未初始化的空槽位。因此，必须先通过 .fill(null) 将空槽位转变为密集数组（Packed Array），map() 的回调才会真正执行。

四、进阶场景：初值本身是对象或需要依据坐标计算

1. 当初始值本身也是引用类型时（防范内层共享）

很多时候，二维数组的每个单元格不是简单的数字 0，而是一个状态对象（例如迷宫寻路算法中的节点 { visited: false, cost: 0 }）。此时即便是外层用了 Array.from，如果内层错误使用了 .fill({ visited: false })，同一行内的所有列又会陷入对象引用的浅拷贝陷阱！

// 错误示范：内层 fill(对象) 导致同行元素对象共享
// Array.from({ length: r }, () => Array(c).fill({ visited: false })); // 危险！

// 正确做法：内层同样使用工厂映射返回全新对象字面量
function createObjectMatrix(rows, cols, createItem) {
  return Array.from({ length: rows }, (rowVal, r) =>
    Array.from({ length: cols }, (colVal, c) => createItem(r, c))
  );
}

// 使用示例：网格寻路节点初始化
const gridMap = createObjectMatrix(3, 3, (r, c) => ({
  row: r,
  col: c,
  visited: false,
  distance: Infinity
}));

gridMap[0][0].visited = true;
console.log(gridMap[0][1].visited); // false，完全独立，毫无污染

2. 依据行列坐标动态计算初始值

Array.from 的映射函数同时提供当前元素值及行、列索引参数 (element, index)。这使得依据数学公式生成矩阵变得格外流畅：

// 生成 1 到 9 的乘法表矩阵
const table = Array.from({ length: 9 }, (_, r) =>
  Array.from({ length: 9 }, (_, c) => (r + 1) * (c + 1))
);

// 生成坐标字符串矩阵
const coords = Array.from({ length: 3 }, (_, r) =>
  Array.from({ length: 4 }, (_, c) => `${r},${c}`)
);

五、选型决策与最佳实践总结

针对不同的项目规模、团队规范和数据模型，初始化二维数组的技术路线可归纳如下：