JS使用Array.from安全创建二维数组的方法

一、为什么常规的 new Array().fill() 会引发灾难？

在许多面向对象语言（如 Java 或 C++）中，矩阵的初始化可以通过直接分配多维空间完成。而在 JavaScript 中，数组本质上是动态引用的特殊对象，并没有原生内置的多维数组类型，所谓的“二维数组”仅仅是“存放了其他数组引用的外层数组”。

许多开发者初学时常常会尝试写出以下看似简洁的代码：

// 危险写法：请勿在实际项目中使用！
const rows = 3;
const cols = 3;
const badMatrix = new Array(rows).fill(new Array(cols).fill(0));

// 尝试修改第 0 行第 0 列的元素
badMatrix[0][0] = 99;

// 查看结果：
console.log(badMatrix[0]); // [99, 0, 0]
console.log(badMatrix[1]); // [99, 0, 0] <-- 第二行也被污染了！
console.log(badMatrix[2]); // [99, 0, 0] <-- 第三行同样被修改！

上述现象就是前端开发中极易发生的浅拷贝引用共享陷阱。其核心原因在于 Array.prototype.fill(value) 的参数传递机制：作为参数传入的 new Array(cols).fill(0) 在执行 fill() 之前只被求值了一次。这意味着外层数组中的 3 个槽位被填入了同一个数组实例在堆内存中的内存地址。

二、使用 Array.from() 安全构造二维数组的标准范式

ECMAScript 6 引入的 Array.from(arrayLike, mapFn) 提供了天然解决此问题的利器。它不仅可以把类数组对象（包含 length 属性的对象）转换为标准数组，还允许传入一个针对每个索引位置重新求值的映射函数。

1. 针对基础类型（数字、布尔、字符串）的标准单行写法

如果矩阵的初始值是纯粹的原始标量值（如全 0 矩阵、布尔矩阵），推荐使用以下形式：

// 安全创建 rows 行 cols 列的二维数组，初始值填充 0
function create2DArray(rows, cols, initialValue = 0) {
  return Array.from({ length: rows }, () => Array(cols).fill(initialValue));
}

// 验证独立性：
const matrix = create2DArray(3, 4, 0);
matrix[0][0] = 1;

console.log(matrix[0]); // [1, 0, 0, 0]
console.log(matrix[1]); // [0, 0, 0, 0] （完全独立，未受影响）
console.log(matrix[0] === matrix[1]); // false （指向完全不同的堆内存）

2. 执行过程深入解析

理解 Array.from({ length: rows }, mapFn) 的两阶段生命周期是掌握该技巧的关键：

1. 尺寸界定阶段：{ length: rows } 是一个最小化的类数组对象（Array-like Object）。Array.from 首先读取其 length 属性，确定需要构造的外层数组长度。
2. 逐槽位独立映射阶段：引擎在内部从索引 0 遍历到 rows - 1。对于每一个索引，它都会独立调用一次第二个参数传入的箭头函数 () => Array(cols).fill(...)。

因为箭头函数被调用了 rows 次，所以代码在内存中显式触发了 rows 次全新的数组分配，返回的每个子数组都是全新的独立实例，从而从语言机制层面彻底消除了指针共享。

三、进阶模式：双层 Array.from 与动态坐标映射

在实际工程开发中，除了全 0 或固定值的填充，我们经常需要根据当前单元格的行坐标 r 与列坐标 c 动态生成数据（如动态序号、距离场、状态节点）。

1. 动态生成网格线性递增序号

利用外层与内层映射函数的第二个参数（即当前迭代索引），我们可以直接进行坐标计算：

const rows = 3;
const cols = 3;

// 双层 Array.from 嵌套，利用 (r, c) 索引直接计算矩阵值
const grid = Array.from({ length: rows }, (_, r) =>
  Array.from({ length: cols }, (_, c) => r * cols + c)
);

console.log(grid);
// 输出：
// [
//   [0, 1, 2],
//   [3, 4, 5],
//   [6, 7, 8]
// ]

2. 初始化包含独立状态对象的二维网格

当网格的每个单元格都需要存储一个状态对象（例如 A* 寻路算法中的节点、走迷宫的访问状态、棋盘格点）时，如果内层使用 .fill({ visited: false })，同样会落入对象引用的陷阱。此时必须在内层也使用工厂函数或者双层 Array.from：

// 正确做法：每个单元格都是独立的对象实例
const stateBoard = Array.from({ length: rows }, (_, r) =>
  Array.from({ length: cols }, (_, c) => ({
    row: r,
    col: c,
    visited: false,
    cost: Infinity,
    parent: null
  }))
);

// 修改单个格子，不会影响同行或同列的其他格子
stateBoard[0][0].visited = true;
console.log(stateBoard[0][1].visited); // false
console.log(stateBoard[1][0].visited); // false

四、多种初始化方案对比与安全选型决策

在 JavaScript 生态中，创建二维数组通常存在四种常见做法。我们将它们在语法简洁度、安全性与执行效率维度进行横向对比：