使用ES6 Array.from简洁创建JS独立行二维数组

在 JavaScript 中动态生成指定行数与列数的二维数组时，最优雅且不易踩坑的单行写法是利用 ES6 提供的 Array.from() 搭配映射函数：const matrix = Array.from({ length: rows }, () => new Array(cols).fill(initialValue));。该方案的核心价值在于为每一行独立执行一次构造函数，从而在堆内存中开辟相互隔离的子数组空间，彻底杜绝传统 new Array(rows).fill([...]) 所引发的多行联动修改缺陷。

一、问题根源：为什么 new Array(rows).fill([]) 会引发灾难？

在编写网格搜索、动态规划、游戏棋盘或图像矩阵算法时，开发者常希望用最短的代码初始化一个 m × n 的二维数组。很多初学者会自然写出如下代码：

// 错误示范：看似简洁，实则存在严重陷阱
const rows = 3, cols = 3;
const badMatrix = new Array(rows).fill(new Array(cols).fill(0));

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

// 预期结果：[[99, 0, 0], [0, 0, 0], [0, 0, 0]]
// 实际输出：[[99, 0, 0], [99, 0, 0], [99, 0, 0]] 每一行都被改动了！
console.log(badMatrix);

这种现象的原因在于 JavaScript 对复杂数据类型的引用传递（Pass by Reference）机制。在上述表达式中，内部的 new Array(cols).fill(0) 在内存中只被执行了一次，生成了一个数组实例（假设堆地址为 0x004A）。随后 fill() 方法将这个内存地址复制并分配给了外层数组的全部槽位。

二、语法剖析：Array.from 是如何保证独立性的？

要理解为什么 Array.from() 能够解决这一痛点，我们需要拆解它的完整语法定义：

// 语法规格
Array.from(arrayLike [, mapFn [, thisArg]])

在创建独立二维数组时，我们传入了两个关键参数：

1. arrayLike 对象 { length: rows }：JavaScript 允许将包含 length 属性的对象视作“类数组对象”。Array.from({ length: 3 }) 会被识别为一个长度为 3 的结构，并在内部生成一个范围从 0 到 2 的索引序列。
2. 工厂映射函数 mapFn：Array.from 的第二个参数相当于内置的 map 操作。与先创建数组再调用 .map() 不同，Array.from 在构造新数组元素的同时就同步触发此函数。这意味着回调函数 () => new Array(cols).fill(0) 会在循环中逐行分别执行，每一次调用都会在 JavaScript 引擎堆内存中通过 new 运算符产生一个全新、互不相关的独立数组对象。

三、实战范式：常用二维数组初始化技巧

在实际开发中，根据业务和算法需求的不同，二维数组可能需要填充固定常量、递增坐标或动态长度。借助 Array.from 的索引参数，我们可以写出非常灵活的初始化逻辑。

1. 填充指定常量（0、空字符串、布尔值）

这是最常规的场景。内层可以直接结合 new Array(cols).fill(val)，因为基本数据类型（如数字、字符串、布尔值）是按值传递的，使用 fill 填充基本类型完全安全：

// 创建 3行 4列，全部初始为 0 的矩阵
const zeroMatrix = Array.from({ length: 3 }, () => new Array(4).fill(0));

// 创建 5行 5列，全部初始为 false 的棋盘访问标记表
const visited = Array.from({ length: 5 }, () => new Array(5).fill(false));

2. 双层嵌套 Array.from 生成坐标或索引值

如果矩阵中的每一个单元格值需要基于其行索引 r 与列索引 c 计算生成，可以将内层也替换为 Array.from，利用其提供的第二个回调参数：

// 创建 3行 3列，值为对应 "(行, 列)" 坐标字符串的二维表
const coordMatrix = Array.from({ length: 3 }, (_, r) =>
  Array.from({ length: 3 }, (_, c) => `(${r},${c})`)
);

// 输出：
// [
//   ["(0,0)", "(0,1)", "(0,2)"],
//   ["(1,0)", "(1,1)", "(1,2)"],
//   ["(2,0)", "(2,1)", "(2,2)"]
// ]

3. 构建不规则阶梯/锯齿数组（Jagged Array）

在杨辉三角、动态规划分层或图的邻接表初始化中，往往需要每行的长度随着行号动态增长。利用 Array.from 的行索引参数，可以随心所欲定制子数组规模：

// 生成第 i 行包含 (i + 1) 个元素的阶梯三角形
const triangle = Array.from({ length: 4 }, (_, i) =>
  new Array(i + 1).fill(i)
);

// 输出：
// [
//   [0],
//   [1, 1],
//   [2, 2, 2],
//   [3, 3, 3, 3]
// ]

四、方案对比与选型指南

除了 Array.from()，JavaScript 中还存在其他构建二维数组的传统手段。下表对比了常见方案的代码表达力、安全性与执行性能：

实现方式	代码示例	行独立性	代码简练度	适用场景
Array.from (推荐)	Array.from({length: m}, () => Array(n).fill(0))	完全独立	极高（单行）	通用业务、中小型算法题、语法可读性优先
传统双层 for 循环	const arr = []; for(...) arr.push(...)	完全独立	较繁琐（5~6行）	超大规模矩阵（100万+元素）、极度追求极致执行速度
Array.fill().map()	new Array(m).fill(null).map(() => Array(n).fill(0))	完全独立	中等	较旧的项目中兼容替代，但逻辑比 Array.from 多一层占位初始化
直接 fill([])	new Array(m).fill(new Array(n).fill(0))	严重联动错误	低（不可用）	绝对禁止使用

五、注意事项与最佳实践

1. 不要漏写回调函数的 return（箭头函数注意大括号）：

   在使用简写箭头函数时，如果添加了花括号 { }，务必显式书写 return。例如 Array.from({ length: 3 }, () => { return new Array(3).fill(0); })。若误漏写 return，外层数组将填充为 [undefined, undefined, undefined]。

2. 慎用命名混淆的索引占位符：

   外层回调第一个参数代表当前项（由于尚未初始化，通常为 undefined），通常使用下划线 _ 忽略它。在嵌套双层 Array.from 时，分别使用 (_, r) 和 (_, c) 命名行与列索引，可以显著提升可读性，避免变量遮蔽。

3. 区分稀疏数组与密集数组：

   直接调用 new Array(3) 会生成只含有空槽（empty slot）的稀疏数组，无法直接对其调用 .forEach() 或 .map()。而 Array.from({ length: 3 }) 会主动遍历每个索引并将其视为真实元素，生成规范的密集数组，行为更加可控稳定。