JavaScript生成二维数组的正确与错误方法解析

作者：青柠时间：2026-10-26 12:04:41浏览：195

本文详解JavaScript中生成二维数组的常见误区。重点解析使用fill方法创建数组时因对象引用共享导致的修改联动问题，并提供通过map、Array.from及嵌套循环实现的正确创建方案，帮助开发者避免数据污染。

JavaScript生成二维数组

方法一

new Array(x).fill(new Array(y).fill(0))

需要注意的是，当使用fill方法传入一个对象时，数组填充的是该对象的引用副本。

这意味着二维数组第一维度的所有子数组都指向同一个内存引用。如果对其中任意一个子数组执行push操作，所有子数组都会增加相同的元素。

方法二

new Array(x).fill().map(() => new Array(y).fill(0))

方法三

Array.from(new Array(x), () => new Array(y).fill(0))

测试代码：

    const arr1 = new Array(2).fill(new Array(3).fill(0))
    // arr1: [ [ 0, 0, 0 ], [ 0, 0, 0 ] ]
    arr1[0].push(9)
    // arr1: [ [ 0, 0, 0, 9 ], [ 0, 0, 0, 9 ] ] 

    const arr2 = new Array(2).fill().map(() => new Array(3).fill(0))
    // arr2: [ [ 0, 0, 0 ], [ 0, 0, 0 ] ]
    arr2[0].push(9)
    // arr2: [ [ 0, 0, 0, 9 ], [ 0, 0, 0 ] ] 

    const arr3 = Array.from(new Array(2), () => new Array(3).fill(0))
    // arr3: [ [ 0, 0, 0 ], [ 0, 0, 0 ] ]
    arr3[0].push(9)
    // arr3: [ [ 0, 0, 0, 9 ], [ 0, 0, 0 ] ]

JS中创建二维数组的坑

JS中二维数组的创建

首先JavaScript只支持一维数组，但我们可以通过一些方法实现矩阵以及多维数组

其中普通的创建方法并不会出现什么问题：

(1) 利用一维数组嵌套一维数组的方式创建二维数组：

let arr = [] ;
a[0] = [1,2,3,4,5,6];
a[1] = [10,20,30,40,50,60]

然后使用一个双层for循环就可以迭代这个二维数组中的元素

所以用这种方法创建多维数组，不管有几个维度，都可以通过嵌套循环来遍历

遇到问题的方法：

  let arr1= new Array(10).fill(new Array(10).fill(0))

控制台打印arr1：

JavaScript生成二维数组

这时候，若你想设置，arr[0][0] = 1，你会发现二维数组所有子数组的第一项都被改为1

JavaScript生成二维数组

原因

JavaScript生成二维数组

综上，还是选择老实一点的创建方法：

var a = new Array();

for(var i=0;i<5;i++){        //一维长度为5

    a[i] = new Array();

    for(var j=0;j<5;j++){    //二维长度为5

    	a[i][j] = 0;
   }

}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53