本文详解 javascript 中二维数组初始化时因对象引用共享导致的“修改一处、全列同步更新”问题，并提供使用 `array.from()`、`array.fill()` 配合扩展运算符等安全方案，确保每个子数组均为独立引用。
你遇到的问题非常典型：看似创建了一个 6×6 的二维数组（board[y][x]），但修改 board[1][5] 却导致所有行的第 5 列同时被赋值为 1。根本原因在于——你重复推入了同一个 row 数组的引用，而非创建多个独立的子数组。
? 问题复现与根源分析
回顾你的原始代码：
let row = [];
for(let x = 0; x < width; x++){
row.push([]); // ✅ 创建 6 个空数组，存入 row（此时 row = [[], [], [], [], [], []]）
}
for(let y = 0; y < height; y++){
board.push(row); // ❌ 错误！每次 push 的都是 row 的同一份引用！
}这意味着 board[0]、board[1] … board[5] 全都指向内存中同一个数组对象。因此 board[1][5] = 1 实际等价于 row[5] = 1，自然所有 board[y][5] 都读取到更新后的 row[5] —— 这就是整列“联动更新”的本质。
✅ 正确解法：为每一行创建全新子数组
✅ 推荐方案：Array.from()（语义清晰、性能良好）
const height = 6;
const width = 6;
// 每次迭代都生成一个全新的长度为 width 的数组，每个元素是独立的 []
const board = Array.from({ length: height }, () =>
Array.from({ length: width }, () => [])
);
board[1][5] = 1;
console.log(board[0][5]); // → []（未被修改）
console.log(board[1][5]); // → 1（仅此处生效）✅ 替代方案：Array.fill() + 扩展运算符（简洁）
const board = Array(height).fill().map(() => Array(width).fill().map(() => []));
⚠️ 注意：不可直接用 Array(width).fill([])，这仍会复用同一子数组引用！
✅ 基础方案：传统 for 循环（最易理解）
const board = [];
for (let y = 0; y < height; y++) {
const newRow = []; // ✅ 每行新建一个数组
for (let x = 0; x < width; x++) {
newRow.push([]); // ✅ 每个格子是独立空数组
}
board.push(newRow);
}? 验证独立性：添加实际数据测试
board[0][0].push('start');
board[1][5].push('target');
console.log(board[0][0]); // → ['start']
console.log(board[1][5]); // → ['target']
console.log(board[0][5]); // → []（完全不受影响）? 关键总结
- 永远避免：先创建一个数组，再多次 push() 它——这只会复制引用；
- 务必确保：每层嵌套数组都通过构造函数（[]）、Array() 或工厂函数（如 () => []）独立实例化；
- Array.from({ length: N }, mapper) 是创建含独立元素的数组的最佳实践，兼具可读性与健壮性；
- 在游戏开发、棋盘逻辑、网格计算等场景中，此类错误会导致难以调试的状态污染，务必从初始化阶段杜绝。
现在，你的 board[y][x] 已真正实现坐标级精确控制——修改任意单元格，再也不会“牵一发而动全身”。
