JavaScript如何生成二维数组

 更新时间:2023年03月24日 10:20:28   作者:shangdong2023  
这篇文章主要介绍了JavaScript如何生成二维数组问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

请添加图片描述

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

请添加图片描述

原因

请添加图片描述

综上,还是选择老实一点的创建方法:

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;
   }

}

总结

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

相关文章

  • JS中多层次排序算法的实现代码

    JS中多层次排序算法的实现代码

    这篇文章主要给大家介绍了关于JS中多层次排序算法的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 浅谈JS继承_借用构造函数 & 组合式继承

    浅谈JS继承_借用构造函数 & 组合式继承

    下面小编就为大家带来一篇浅谈JS继承_借用构造函数 & 组合式继承。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 浅谈JavaScript的全局变量与局部变量

    浅谈JavaScript的全局变量与局部变量

    下面小编就为大家带来一篇浅谈JavaScript的全局变量与局部变量。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS全局变量和局部变量最新解析

    JS全局变量和局部变量最新解析

    这篇文章主要介绍了JS全局变量和局部变量最新解析的相关知识,本文给给大家补充js删除局部变量的代码,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • tangram.js库实现js类的方式实例分析

    tangram.js库实现js类的方式实例分析

    这篇文章主要介绍了tangram.js库实现js类的方式,结合实例形式分析了tangram.js库实现类的创建、继承等相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • 原生javascript获取元素样式属性值的方法

    原生javascript获取元素样式属性值的方法

    实际应用中, 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从Css中获取元素的最终样式属性.
    2010-12-12
  • bootstrap table列和表头对不齐的解决方法

    bootstrap table列和表头对不齐的解决方法

    这篇文章主要为大家详细介绍了bootstrap table列和表头对不齐的解决方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    原生JS实现网页手机音乐播放器 歌词同步播放的示例

    下面小编就为大家分享一篇原生JS实现网页手机音乐播放器 歌词同步播放的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • javascript(js) join函数使用方法介绍

    javascript(js) join函数使用方法介绍

    javascript(js) join函数使用方法介绍...
    2007-11-11
  • 跟我学习javascript的定时器

    跟我学习javascript的定时器

    跟我学习javascript的定时器,告诉大家具体的使用方法,并向大家提出了一个消息要求,制作一个定时器,有没有朋友感兴趣,挑战一下
    2015-11-11

最新评论