JavaScript中new Array创建二维数组push元素异常原因及解决方法

原因分析 #

当你使用new Array(3).fill([])时，fill方法会将同一个空数组的引用填充到新数组的每一个索引位置。也就是说，数组arr的三个元素指向的是内存中的同一个数组对象。所以当你执行arr[1].push('a')时，实际上是在修改那个共享的数组，结果自然会体现在所有索引上。

而显式写const arr = [[], [], []]时，每一个[]都是独立创建的新数组，各自拥有独立的内存引用，修改其中一个不会影响其他。

简洁的正确实现方式 #

如果你想要简洁地创建每个元素都是独立空数组的二维数组，可以用以下几种方式：

方式一：使用map方法 #

const arr = new Array(3).map(() => []);
arr[1].push('a');
console.log(arr);
// [[], ['a'], []]

map会为数组的每个元素执行一次回调函数，每次回调里的[]都是新创建的数组，避免了引用共享。

方式二：使用Array.from #

const arr = Array.from({ length: 3 }, () => []);
arr[1].push('a');
console.log(arr);
// [[], ['a'], []]

Array.from可以根据传入的长度参数，通过回调函数为每个位置生成新的空数组，效果和上面一致。

方式三：展开语法结合Array构造函数 #

const arr = [...new Array(3)].map(() => []);
arr[1].push('a');
console.log(arr);
// [[], ['a'], []]

展开new Array(3)会生成一个由undefined填充的数组，再用map替换每个undefined为新的空数组。

内容的提问来源于stack exchange，提问作者Josh Lee