本文详解 javascript 中二维数组的初始化陷阱，重点解决因数组引用导致的“修改单个元素却影响整列”的常见错误，并提供使用 `array.from` 创建独立子数组的可靠方案。
在 JavaScript 中创建二维数组（如棋盘、网格或坐标表）时，一个极易被忽视却后果严重的错误是：重复引用同一子数组实例。正如示例代码所示，当用 board.push(row) 在循环中多次推入同一个 row 数组时，board 的每一行实际都指向内存中的同一个数组对象。因此，执行 board[1][5] = 1 并非只修改第 1 行第 5 列，而是修改了该共享子数组的第 5 个索引——所有行均同步反映这一变更，最终输出中每行第 5 位都变为 1。
根本原因在于：row 是一个引用类型变量，board.push(row) 只是将该引用复制了多次，而非创建新数组。要实现真正的二维独立结构，必须确保每一行都是全新创建的数组，且每个子数组也互不共享。
✅ 正确做法：使用 Array.from() 配合映射函数生成独立子数组
let height = 6;
let width = 6;
// 每次迭代都创建一个全新的长度为 width 的空数组
let board = Array.from({ length: height }, () => Array(width).fill().map(() => []));
// 或更简洁清晰的写法（推荐）：
let board2 = Array.from({ length: height }, () =>
Array.from({ length: width }, () => [])
);
board2[1][5] = 1;
console.log(board2[0][5]); // undefined —— 未受影响 ✅
console.log(board2[1][5]); // 1 ✅
console.log(board2[2][5]); // [] —— 独立存在 ✅
// 进一步验证独立性：向某单元格的子数组添加元素
board2[0][0].push('A');
board2[1][0].push('B');
console.log(board2[0][0]); // ['A']
console.log(board2[1][0]); // ['B'] —— 完全隔离⚠️ 注意事项：
- ❌ 避免 Array(width).fill([])：fill() 会用同一引用填充所有位置，仍导致共享；
- ❌ 避免在外层循环中复用 row = [] 后反复 push(row)：本质仍是引用复用；
- ✅ Array.from({ length: N }, fn) 是安全选择，因其对每个索引独立调用回调函数，每次返回新数组；
- 若需初始化为特定值（如 null 或 0），可直接 () => null；若需嵌套可变结构（如子数组），务必确保回调内 new Array() 或 [] 被每次执行。
总结：二维数组的本质是“数组的数组”，而 JavaScript 中数组是引用类型。构建时必须切断引用链——让每一维的每一项都成为独立对象。Array.from 提供了语义清晰、行为可靠的初始化方式，是处理此类问题的首选实践。
