search

Home >Web Front-end >JS Tutorial >How to perform array traversal in js? 3 methods of one-dimensional array traversal in js (detailed explanation with pictures and texts)

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

青灯夜游
青灯夜游Original
2018-10-16 13:48:285144browse

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>

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>

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>

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Common ways to get time in js (code)Next article：Common ways to get time in js (code)

Related articles

See more