基础型网站价格,中文网站建设工具,开网站 怎么做网上支付,oa平台登录系统入口js创建二维空数组 错误使用原因分析分析1举个例子#xff1a;解释#xff1a; 正确创建二维数组总结#xff1a; 错误使用
今天在写代码的时候#xff0c;需要创建一个长度为2的空二维数组#xff0c;我当时第一反应就是#xff0c;使用let arr new Array(2).fill([])解释 正确创建二维数组总结 错误使用
今天在写代码的时候需要创建一个长度为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() 或其他方式确保每个元素指向不同的数组对象。
