How to perform array traversal in js? 3 methods of one-dimensional array traversal in js (detailed explanation with pictures and texts)-JS Tutorial-php.cn

How to perform array traversal in js? 3 methods of one-dimensional array traversal in js (detailed explanation with pictures and texts)

青灯夜游

Release： 2018-10-16 14:00:28

Original

5116 people have browsed it

How to traverse js array? This article will introduce to you how js traverses one-dimensional arrays, and let you know the three methods of one-dimensional array traversal in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

One-dimensional array traversal in js can basically be implemented using some methods such as for, forin, foreach, forof, map, etc. Below we will focus on the three types of array traversal: for, forin, and foreach. How the method is implemented is explained through a simple code example.

Using for loop in jsTraverse the array
##

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<script type="text/javascript">
			var arr = [11, 22, 33, 55];
			//普通的循环遍历方式
			function first() {
				for(var i = 0; i < arr.length; i++) {
					console.log("arr[" + i + "]：" + arr[i]);
				}
			}
		</script>
		<input type="button" value="for循环遍历" name="aa" onclick="first();" /><br/>
	</body>
</html>

Copy after login

Rendering (traversal result):

How to perform array traversal in js? 3 methods of one-dimensional array traversal in js (detailed explanation with pictures and texts)

Brief description:

The for loop is the simplest traversal method and the most frequently used traversal method.

Using for in loop in jsTraverse the array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<script type="text/javascript">
			var arr = [11, 22, 33, 55];
			//for ..in循环遍历方式
			function second() {
				for(var index in arr) {
					console.log("arr[" + index + "]：" + arr[index]);
				}
			}
		</script>
		<input type="button" value="for...in遍历" name="aa" onclick="second();" /><br/>
	</body>
</html>

Copy after login

Rendering (traversal result):

How to perform array traversal in js? 3 methods of one-dimensional array traversal in js (detailed explanation with pictures and texts)

Brief description:

for...in loop needs two formal parameters to traverse the array, index represents the subscript of the array (can be customized), and arr represents the traversal array.

The for...in loop is a method that many people like to use, but in fact, analysis and testing have found that among the many loop traversal methods, its efficiency is the lowest.

Using foreach loop in jsTraverse the array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<script type="text/javascript">
			var arr = [11, 22, 33, 55];

			//很鸡肋的遍历方式---forEach
			function third() {
				arr.forEach(function(ele, index) {
					console.log("arr[" + index + "]：" + ele);
				});

			}
		</script>
		<input type="button" value="forEach循环遍历" name="aa" onclick="third();" /><br/>
	</body>

</html>

Copy after login

Rendering (traversal result):

How to perform array traversal in js? 3 methods of one-dimensional array traversal in js (detailed explanation with pictures and texts)

Brief description:

The foreach loop that comes with the array is used more frequently, but its performance is actually weaker than the ordinary for loop.

The foreach loop has two parameters. The first parameter (ele, which can be customized) represents the element in the array, and the second parameter (index, which can be customized) represents the subscript of the array.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit

JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Tutorial!

The above is the detailed content of How to perform array traversal in js? 3 methods of one-dimensional array traversal in js (detailed explanation with pictures and texts). For more information, please follow other related articles on the PHP Chinese website!