用.fill()对js二维数组进行初始化为什么会出现这种情况？

Question

let arr = Array(3).fill(Array(3).fill(0))
arr[1][2] = 1
console.log(arr)

/* =>
 [0, 0, 1]
 [0, 0, 1]
 [0, 0, 1]
*/

如果这个方法行不通，还有什么方法能优雅地初始化一个n*n二维数组呢，并不想用两层的for循环……

Answer 1

供参考

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

或者

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

Answer 2

function create_2d_array(n, m, v) {
    return new Array(n).fill(undefined).map(() => new Array(m).fill(v))
}

先用 Array() 生成一维数组，然后通过 map() 每次迭代返回新数组的引用（而非同一个数组的引用），再通过 fill() 填充初始值。（直接 new Array() 返回的数组需要 fill() 填充值，如undefined，才能使用 map）

Answer 3

let arr = Array(3).fill(0).map(()=>Array(3).fill(0))

Answer 4

fill()每次都是创建一个对象，指的是同一内存地址的对象，简单来说就是浅拷贝，所以会同时变更数据。

Array(3).fill(0); //输出[0, 0, 0]；
Array(3).fill(Array(3).fill(0));//拷贝三次[0, 0, 0]，也就是相当于一个二维数组[[0, 0, 0],[0, 0, 0],[0, 0, 0]]
arr[1][2] = 1; //更改第二行第三列的数据，所以就变成了
/* =>
 [0, 0, 1]
 [0, 0, 1]
 [0, 0, 1]
*/

解决办法：
其他人的回答，或者：
var arr = new Array(3).fill(JSON.stringify({

name: 'deng',
age: 18,
job: 'software'

}))
arr=arr.map(item=>JSON.parse(item))
console.log(arr)
arr[0].name = 'dengbbbb'
console.log(arr)