JavaScript中fill创建的二维数组赋值整列改变，如何仅更新单个单元格？

你用new Array(2).fill(new Array(2).fill(-1))创建二维数组时，踩了fill方法的一个坑：如果填充的是引用类型（比如数组），fill会把同一个引用重复赋值给外层数组的每个位置。也就是说，r[0]和r[1]指向的是同一个内存地址里的数组，改其中一个的元素，另一个自然也会跟着变。

要解决这个问题，只要保证每个内层数组都是独立的实例就行，给你几种实用的写法：

• 使用Array.from生成独立内层数组：

  var r = Array.from({ length: 2 }, () => new Array(2).fill(-1));
  

  第二个参数是回调函数，每次都会新建一个内层数组，完美避免引用共享。

• 手动循环初始化：

  var r = new Array(2);
  for (let i = 0; i < r.length; i++) {
    r[i] = new Array(2).fill(-1);
  }
  

  循环里每次都创建新的内层数组，逻辑直观易懂。

• 直接用数组字面量定义（适合小数组）：

  var r = [[-1, -1], [-1, -1]];
  

  这种方式每个内层数组都是单独创建的，简单直接。

现在再执行r[1][0] = "r"，数组就只会更新目标单元格，变成[[-1, -1], ["r", -1]]了。

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