js创建二维空数组

错误使用

今天在写代码的时候，需要创建一个长度为2的空二维数组，我当时第一反应就是，使用let arr = new Array(2).fill([])，我在控制台打印了，发现确实创建了一个空二维数组，但是，实际上我根据索引进行数组push时，发现二维数组中的两个元素同时改变。后来查找资料发现如下原因：

原因分析

使用 let arr = new Array(2).fill([]) 创建二维数组时不可行的原因，实际上是因为 Array.prototype.fill() 方法填充的是对同一个引用的所有数组元素，而不是创建独立的空数组。因此，fill([]) 会将所有的数组元素都填充为对同一个空数组的引用。

分析1

let arr = new Array(2).fill([]);
console.log(arr);  // 输出：[[], []]

• 这段代码确实会生成一个长度为 2 的数组 arr，其中包含两个数组元素 [[], []]。但这两个元素并不是两个独立的空数组，而是引用了同一个空数组对象。

• 问题：由于数组元素是引用类型，因此数组 arr 的两个元素实际指向同一个空数组。修改其中一个元素，也会影响到另一个元素。

举个例子：

let arr = new Array(2).fill([]);// 修改 arr[0] 中的内容
arr[0].push(1);console.log(arr);  // 输出：[[1], [1]]

解释：

• 当你使用 arr[0].push(1) 向第一个空数组中添加元素时，实际上会影响到 arr[1]，因为它们指向的是同一个空数组对象。因此，arr[1] 也变成了 [1]。

正确创建二维数组

要避免这个问题，应该确保每个数组元素都指向不同的空数组对象。你可以使用 map() 来创建每个元素的独立副本。

let arr = new Array(2).fill(null).map(() => []);
console.log(arr);  // 输出：[[], []]// 修改 arr[0] 中的内容，不会影响 arr[1]
arr[0].push(1);
console.log(arr);  // 输出：[[1], []]

• 这里，fill(null) 先用 null 填充数组，然后通过 map(() => []) 为每个元素创建一个新的空数组。这样，arr[0] 和 arr[1] 就是两个独立的空数组，不会互相影响。

总结：

• new Array(2).fill([]) 创建的二维数组中的两个元素引用的是同一个空数组。
• 解决方法是使用 map() 或其他方式确保每个元素指向不同的数组对象。