JavaScript - Array forEach() 方法_JavaScript 菜鸟教程

JavaScript Array.forEach（）方法用于迭代数组的元素，为每个元素执行一次提供的回调函数。此方法不会对空元素执行。它不会更改或修改原始数组。

语法

以下是 JavaScript Array forEach（） 方法的语法 -


 array.forEach(callbackFn (element, index, array), thisArg);

参数

此方法接受两个参数。下面描述相同 -

callbackFn − 这是一个回调函数，将为数组中的每个元素调用一次。它进一步需要三个参数 -
- element − 数组中正在处理的当前元素。
- index − 正在处理的当前元素的索引。
- array − 当前元素的数组。
thisArg（可选）-它指定传递给函数的值，用作其 this 值。

示例 1

在下面的示例中，我们使用 JavaScript Array.forEach（）方法，传递一个采用一个参数（element）的回调函数。此函数将 “animals” 数组中的每个元素推送到一个新的空数组中。


<html>
<body>
	 	<p id="demo"></p>
	 	<script>
	 	 	 const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
	 	 	 const newArray = [];
	 	 	 animals.forEach((element) => {
	 	 	 	 	newArray.push(element);
	 	 	 });
	 	 	 document.getElementById("demo").innerHTML = newArray;
	 	</script>
</body>
</html>

输出

正如我们所看到的，“animals” 数组中的所有元素都被推送到新数组中。

Lion,Cheetah,Tiger,Elephant,Dinosaur

示例 2

在这里，我们传递了一个回调函数，它接受两个参数（element， index）。此函数返回 “animals” 数组中的每个元素及其索引。


<html>
<body>
	 	<p id="demo"></p>
	 	<script>
	 	 	 const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
	 	 	 animals.forEach(function(element, index) {
	 	 	 	 	document.write(index + 1, ": ", element + "<br>");
	 	 	 });
	 	</script>
</body>
</html>

执行程序后，所有数组元素都与它们各自的索引号一起打印出来。

输出

1: Lion
2: Cheetah
3: Tiger
4: Elephant
5: Dinosaur

示例 3

在这里，我们传递一个接受所有三个参数（element、index、array）的回调函数。此函数返回 “animals” 数组中的每个元素及其索引和整个数组。


<html>
<body>
	 	<p id="demo"></p>
	 	<script>
	 	 	 const animals = ["Lion", "Cheetah", "Tiger", "Elephant"];
	 	 	 animals.forEach(function(element, index, array) {
	 	 	 	 	document.write(`Index ${index}: ${element}, Array: ${array} <br>`);
	 	 	 });
	 	</script>
</body>
</html>

执行上述程序后，打印每个动物、其索引和整个数组。

输出

Index 0: Lion, Array: Lion,Cheetah,Tiger,Elephant
Index 1: Cheetah, Array: Lion,Cheetah,Tiger,Elephant
Index 2: Tiger, Array: Lion,Cheetah,Tiger,Elephant
Index 3: Elephant, Array: Lion,Cheetah,Tiger,Elephant

<< JavaScript - Array filter() 方法 JavaScript - Array indexOf() 方法 >>