JavaScript - Array forEach（） 方法

上一页
下一页

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
打印本页
上一页
下一页