使用数组创建表格时修改元素触发整列更新的问题排查

你遇到的问题核心是所有行都指向同一个row数组的引用。

JavaScript里数组属于引用类型，你先创建了一个row数组并填充6个空数组，之后在循环中反复把这个row推到board里。这意味着board中的6个元素其实都是同一个数组的内存指针——看起来是6行，本质上是同一个数组被引用了6次。所以你修改board[1][5]时，实际是修改了这个共享数组的第6个元素，所有引用它的行都会同步显示这个变化。

修正方案1：循环内新建行数组 #

每次循环都创建独立的row数组，避免引用复用：

let height = 6;
let width = 6;

let board = [];

for(let y = 0; y < height; y++){
  // 每次循环都新建一个row，保证每行都是独立数组
  let row = [];
  for(let x = 0; x < width; x++){
    row.push([]);
  }
  board.push(row);
}

board[1][5] = 1;
console.log(board);

修正方案2：用Array.from简化创建 #

通过Array.from的回调函数，每次生成独立的行数组：

let height = 6;
let width = 6;

let board = Array.from({length: height}, () => {
  return Array.from({length: width}, () => []);
});

board[1][5] = 1;
console.log(board);

修正后再执行代码，只会看到board[1][5]被设为1，其他行的对应位置仍为空数组，符合你的预期。

内容的提问来源于stack exchange，提问作者Sean.realitytester