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

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

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' ] ]

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

这与数组（以及一般对象）是引用而不是值的老问题相同。

具体来说，当你这样做时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 []; } );