由Array.prototype.fill()填充的数组的奇怪行为

Question

我面对一些我不理解的阵列.实际上,我创建了一个我用空子数组填充的数组来获得2D矩阵.但是当我操纵数组时,它的行为并不像我预期的那样.

var arr = new Array(5);
arr.fill([]);
arr[2].push("third rank item");
console.log(arr);

//[ [ 'third rank item' ],
//  [ 'third rank item' ],
//  [ 'third rank item' ],
//  [ 'third rank item' ],
//  [ 'third rank item' ] ]

关于此事的每一个亮点都会受到欢迎

Answer 1

这与数组(以及通常的对象)是引用而不是值是同样的老问题.

具体来说,当您这样做时arr.fill([]),您将获取一个单个空数组并使用它来填充父数组.

这就像说:

var arr = new Array(5);
arr[0] = arr[1] = arr[2] = arr[3] = arr[4] = [];

它们都引用相同的数组!所以当你继续修改其中一个时,看起来它们都被修改了(但实际上它仍然是相同的)

不幸的是,没有简单的方法为每个人分配一个空数组.你可以这样做:

Array.apply(null, Array(5)).map(function() {return [];});

实质上,创建一个长度为5的(初始化的)空数组,并将每个(空)值映射到一个新数组[].

编辑:好像我以前被困住了.根据@ torazaburo的评论,您可以使用Array.from而不是Array.apply(null, Array(5)).map,如下:

Array.from( new Array(5), function() { return []; } );