JavaScript - 数组 forEach() 方法

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

语法

以下是 JavaScript 数组 forEach() 方法的语法 -

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

参数

此方法接受两个参数。具体描述如下 -

• callbackfn - 这是一个回调函数，数组中的每个元素都会被调用一次。它还需要三个参数 -
  • element - 数组中当前正在处理的元素。
  • index - 当前正在处理的元素的索引。
  • array - 当前元素的数组。
• thisArg(可选)- 它指定传递给函数的值，用作其 this 值。

示例

示例 1

在下面的示例中，我们使用 JavaScript 数组的 forEach() 方法，传递一个接受一个参数(元素)的回调函数。此函数将"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

这里，我们传递了一个回调函数，该函数接受两个参数(元素和索引)。该函数返回 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

这里，我们传递了一个回调函数，该函数接受所有三个参数(元素、索引、数组)。该函数返回 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