js二维数组初始化问题

​起因是自己正在写一个俄罗斯方块的小游戏，构建地图需要用到二维数组，首先就是二维数组的初始化，本能反应，利用两个for循环（一个比较笨的办法）：

let map = []
for (let i = 0; i < 10; i++) {
  let arr = []
  for (let j = 0; j < 10; j++) {
    arr[j] = 0
  }
  map.push(arr)
}

​作为一名‘懒惰’的程序员，自然不能允许这种写法，于是想到了fill()方法，代码如下：

let map = new Array(10).fill(new Array(10).fill(0))

​可是当我进行赋值操作时：

map[0][0] = 3
/* 
[
  [
    3, 0, 0, 0, 0,
    0, 0, 0, 0, 0
  ],
  [
    3, 0, 0, 0, 0,
    0, 0, 0, 0, 0
  ],
  [
    3, 0, 0, 0, 0,
    0, 0, 0, 0, 0
  ]......
]
*/

f12打开谷歌调试面板，进入Memory面板（关于Memory面板的使用介绍，可自行查询），发现果然，声明的数组内存指向了同一个地址：

​这种时候，想到了map方法，创建新的数组返回，自然就不会出现上面这种情况，利用map()给大家两种初始化二维数组的写法：

let arr = Array.from(new Array(10)).map(() => new Array(10).fill(0))

let arr = [...(new Array(10))].map(() => new Array(10).fill(0))

​进入Memory面板，重新生成快照：

​之后便可以正常赋值操作了，强烈建议大家可以去了解一下Memory面板。