不同初始化方法的Javascript数组差异

Question

有人可以向我解释为什么在Javascript控制台(节点7.2.0)中发生以下情况:

示例I中的数组与示例II和III具有不同的行为

例I

> var x = new Array(3).fill(new Array(2).fill(0))
> x
[ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
> x[0][0] = 1;
> x
[ [ 1, 0 ], [ 1, 0 ], [ 1, 0 ] ]

实施例II

> var y = [...new Array(3)].map(()=>{return [...new Array(2)].map(()=>0)})
> y
> [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
> y[0][0] = 1
> [ [ 1, 0 ], [ 0, 0 ], [ 0, 0 ] ]

实施例III

> var y = []
> y.push([ 0, 0 ])
> y.push([ 0, 0 ])
> y.push([ 0, 0 ])
> y
> [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
> y[0][0] = 1
> [ [ 1, 0 ], [ 0, 0 ], [ 0, 0 ] ]

似乎初始化数组的不同方法将导致数组的不同行为.我很困惑,并提前谢谢你.

Answer 1

array.fill()返回修改后的数组,因此您将使用对同一数组的多个引用填充数组.这就是为什么当你在一个地方修改它时,它会自动显示在其他地方.

第一个例子相当于做类似的事情:

var arr = [ 0, 0 ];
var x = [ arr, arr, arr ];