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

列印頁面