嵌套循环中无法正确设置JavaScript二维数组问题排查

问题根源 #

你代码里的核心问题出在二维数组初始化这一行：

points = new Array(GRID_WIDTH).fill(new Array(GRID_WIDTH).fill({}));

Array.fill() 方法对于引用类型（比如数组、对象），填充的是同一个引用，而非新的副本。也就是说，points数组里的每一行，都指向同一个子数组实例。当你在内循环修改points[y][x]时，所有行的对应x位置都会被同步修改，最终所有行内容完全一致，看起来就像内循环只对第一行生效。

修复方案 #

需要为每一行创建独立的子数组，替代原来的fill写法。有两种简单方式：

方式1：使用Array.from

points = Array.from({length: GRID_WIDTH}, () => new Array(GRID_WIDTH).fill({}));

Array.from的第二个参数是映射函数，每次调用都会返回一个新的子数组，确保每一行都是独立的。

方式2：用循环手动初始化

points = new Array(GRID_WIDTH);
for (let y = 0; y < GRID_WIDTH; y++) {
  points[y] = new Array(GRID_WIDTH).fill({});
}

通过循环逐个创建子数组，同样能保证每一行的独立性。

修复后的完整setup函数示例 #

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  stroke("#000");
  R = 100;
  angleMode(RADIANS);
  // 替换成正确的初始化方式
  points = Array.from({length: GRID_WIDTH}, () => new Array(GRID_WIDTH).fill({}));
  
  // 计算并绘制每个点
  for (let y = 0; y < GRID_WIDTH; y++) {
    for (let x = 0; x < GRID_WIDTH; x++) {
      points[y][x] = Object.assign({}, grid2Sphere(x, y));
      console.log(points[y][x]);
    }
    console.log(points[y]); // 现在会打印当前y行的正确内容
  }
  
  drawPoints(points);
}

补充说明 #

你在内循环里用Object.assign({}, grid2Sphere(x, y))是没问题的，确保了每个位置的对象都是独立副本，不会出现对象引用共享的问题，问题只出在二维数组的行引用上。

内容的提问来源于stack exchange，提问作者JBrown