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>

        页面效果:

Js中数组遍历的方式

 

        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>

         页面效果:Js中数组遍历的方式

       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>

         页面效果:

Js中数组遍历的方式

        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>

         页面效果:

Js中数组遍历的方式

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢