Js中数组遍历的方式

时间：2022-01-06作者：klpeng分类：IT综合浏览：729评论：0

1、通过for循环遍历

从0开始for循环，每次加1。直到加到数组长度-1为止。利用得到的有序索引来获取数组的元素值

        for(var i = 0;i<数组长度;i++){

        }

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var array = [8,88,888,6,66,666];
			for(var i = 0;i<array.length;i++){
				console.log("当前索引为:"+i+",元素值为:"+array[i]);
			}
		</script>
	</body>
</html>

页面效果:

2、获取当前索引: var i in 数组名

每次遍历出数组的索引，可以通过数组名[索引]来获取数组的元素

for(var i in 数组名){

//每次遍历出来的i 值，是每次遍历的数组索引。所以要访问值需要数组名[i]

}

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var array = [8,88,888,6,66,666];
			for(var i in array){
				console.log("i的值为: "+i+ ",元素值:"+ array[i]);
			}

		</script>
	</body>
</html>

页面效果:

3、获取当前元素值: var value of 数组名

ES6新增的，每次遍历出数组的值

for(let i of 数组名){

//每次遍历出来的i 值，就是数组对应的元素值

}

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var array = [8,88,888,6,66,666];
			for(var value of array){
				console.log("元素值:"+ value);
			}

		</script>
	</body>
</html>

页面效果:

4、对象数组中的方法 : forEach()

是上述两种的结合，每次递归都会获取当前的值和索引。

forEach方法传入参数，传入一个匿名函数，该函数会依次递归有序遍历数组中的元素，传入的参数按顺序为，第一个参数是每次遍历的数组值，第二个参数是遍历的当前索引，第三个参数就是数组对象。参数都可以省略。

forEach(

function(value,index,array){

//value是值，index是索引，array是对象

}

);

代码示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>		
			var array = [8,88,888,6,66,666];		
			array.forEach(
				function(value,index,array){
				console.log("当前索引:"+index+",值为:"+value);
				console.log("值为:"+array[index]);
				}
			)
		</script>
	</head>
	<body>
	</body>
</html>

页面效果: