前端笔记64——二维数组

最新推荐文章于 2024-01-18 00:41:01 发布

野生杂学家阿博

最新推荐文章于 2024-01-18 00:41:01 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签：前端 JavaScript 数组二维数组二维数组遍历

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/86551403

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

前言

在上篇博客《前端笔记63——数组》中，我分享到了一维数组的学习心得，下面分享一下二维数组的学习心得。

二维数组的定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 定义一维数组
			var arr1 = [1,2,3,4]
			var arr2 = [5,6,7,8]
			var arr3 = [9,10,11,12]
			// 定义二维数组
			var group = [arr1,arr2,arr3] 
		</script>
	</body>
</html>

二维数组的增删改查

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 二维数组的操作  增加，删除，修改， 查询
			var group = [
				[90,92,88],
				[88,22,44],
				[36,33,66]
			]
			// 获取二维数组中的元素，注意，通过下标获取的是一个数组
			console.log(group[0])
			//二维数组就多了一个下标
			console.log(group[0][0])
			
			// 删除元素
			delete group[2][2]
			console.log(group)
			
			// 增加元素
			group[1][group[1].length] = 100
			// 批量添加元素
			for (var i = 0; i < 100; i++) {
				group[1][group[1].length] = i
			}
			
			// 修改元素
			group[0][1] = 0
			console.log(group)
		</script>
	</body>
</html>

二维数组的遍历

二维数组有两种for循环遍历方式，代码里面都有的。开发当中，主要看自己喜欢那一种。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<script type="text/javascript">
			var group = [
				[90, 92, 88],
				[88, 22, 44],
				[36, 33, 66]
			]
//			for(var i = 0, len = group.length; i < len; i++) {
//				//				console.log(group[i])
//				var arr = group[i]
//				for(var j = 0, len = arr.length; j < len; j++) {
//					console.log(arr[j])
//				}
//			}
			// 二维数组遍历  其实就是两次循环嵌套
			
			for (var i in group) {
				var arr = group[i]
				for(var j in arr){
					console.log(arr[j])
				}
			}
		</script>
	</body>

</html>

总结

上面是我通过三个代码实例来说明，学习前端的小伙伴们可以把他们复制到编译器运行。希望对前端学习的小伙伴有帮助。

野生杂学家阿博

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端笔记64——二维数组

前言在上篇博客《前端笔记63——数组》中，我分享到了一维数组的学习心得，下面分享一下二维数组的学习心得。二维数组的定义&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &a
复制链接

扫一扫

专栏目录