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

Question

我遇到了一些我不理解数组的问题。事实上，我创建了一个数组，并用空子数组填充以获得二维矩阵。但是当我操作数组时，它的行为并不像我预期的那样。

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 []; } );