JavaScript中用new Array和fill创建二维数组的异常问题与解决

原因分析 #

你用new Array(this.height).fill(new Array(this.width).fill("✼"))创建二维数组时，踩了引用类型的常见陷阱：
Array.fill()方法如果传入的是引用类型值（比如数组、对象），会将这个值的同一个内存引用填充到数组的每一个位置中。也就是说，fieldBloom里的所有子数组，本质上都是同一个数组的引用——它们指向内存里的同一块区域。所以当你修改fieldBloom[0][0]时，所有子数组都会跟着变化，因为它们其实是同一个东西。

你的代码执行后，fieldBloom的结构可以理解为：

fieldBloom = [ 子数组引用1, 子数组引用1, 子数组引用1, ... ]

所有位置的引用都指向同一个子数组，自然修改一处会全变。

解决方法 #

只要保证每个子数组都是独立的新数组就行，以下是几种常用写法：

方法1：使用Array.from() #

Array.from()会为每个元素执行回调函数，每次都生成新的子数组：

const fieldBloom = Array.from({ length: this.height }, () => new Array(this.width).fill("✼"));

方法2：使用Array.map() #

先创建一个空值填充的数组，再通过map为每个位置生成新子数组：

const fieldBloom = new Array(this.height).fill().map(() => new Array(this.width).fill("✼"));

这里fill()不传参数会填充undefined，map遍历的时候每个元素都会触发回调生成新数组，确保每个子数组独立。

方法3：使用for循环手动创建 #

最直观的方式，循环中逐个创建并推入新子数组：

const fieldBloom = [];
for (let i = 0; i < this.height; i++) {
  fieldBloom.push(new Array(this.width).fill("✼"));
}

验证 #

修改后的代码执行fieldBloom[0][0] = "A"后，结果会符合预期：

[
  [ 'A', '✼', '✼', '✼', '✼', '✼' ],
  [ '✼', '✼', '✼', '✼', '✼', '✼' ],
  [ '✼', '✼', '✼', '✼', '✼', '✼' ],
  [ '✼', '✼', '✼', '✼', '✼', '✼' ],
  [ '✼', '✼', '✼', '✼', '✼', '✼' ]
]

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