在 JavaScript 中使用迭代器函式


在本文中,我們將討論 JavaScript 中迭代器函式的重要性。我們可以使用迭代器函式來迭代陣列。除了顯式迭代之外,Javascript 還提供各種迭代函式,可用於迭代陣列。在這裡,我們使用 forEach()、filter 方法() 和 map() 方法來迭代陣列並執行所需的操作。

ForEach 函式

此函式將一個函式作為引數,並在您將其傳遞給陣列中每個物件時執行它。

語法

以下是 forEach() 方法的語法。

array.forEach(function(currentValue, index, arr), thisValue)

示例 1

在 JavaScript 中使用 forEach() 方法作為迭代器函式的示例

let people = ['Harry', 'Martha', 'John', 'Sam']
people.forEach(person => console.log(person.toUpperCase()));

示例 2

在本例中,我們將討論 forEach() 方法的使用。在這種情況下,我們使用 forEach() 方法迭代陣列並顯示結果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Iterator functions in JavaScript</title>
      <div id="forEach"></div>
   </head>
   <body>
      <script type="text/javascript">
         let students = ["Harry", "Martha", "John", "Sam"];
         students.forEach((mem) => document.write(mem.toUpperCase(), "<br>"));
      </script>
   </body>
</html>

Filter() 函式

此函式會為您傳遞給它的陣列中每個物件執行函式,並根據返回真值的值建立一個新陣列。

語法

以下是 filter() 方法的語法。

array.filter(function(currentValue, index, arr), thisValue)

示例 1

在本例中,我們將討論 filter() 方法的使用。我們使用 filter() 方法迭代陣列並顯示結果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Iterator functions in JavaScript</title>
   </head>
   <body>
      <script type="text/javascript">
         let students = ["Harry", "Martha", "John", "Sam"];
         document.write(students.filter((mem) => mem[0] === "H"));
      </script>
  </body>
</html>

示例 2

下面給出了另一個使用 filter() 函式的迭代示例:

let people = ['Harry', 'Martha', 'John', 'Sam']
console.log(people.filter(person => person[0] === 'H'));

Map 函式

此函式會為您傳遞給它的陣列中每個物件執行函式,並根據您返回的內容建立一個新陣列。

語法

以下是 map() 方法的語法。

array.map(function(currentValue, index, arr), thisValue)

示例 1

在本例中,我們將討論 map() 方法的使用。在這種情況下,我們使用 map() 方法迭代陣列並顯示結果。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Iterator functions in JavaScript</title>
      <div id="map"></div>
   </head>
   <body>
      <script type="text/javascript">
         let students = ["Harry", "Martha", "John", "Sam"];
         let upperCaseNames = students.map((mem) => mem.toUpperCase());
         document.getElementById("map").innerHTML = upperCaseNames;
      </script>
   </body>
</html>

示例 2

以下示例使用 map() 函式在 JavaScript 中執行迭代:

let people = ['Harry', 'Martha', 'John', 'Sam']
let upperCaseNames = people.map(person => person.toUpperCase())
console.log(upperCaseNames);

更新於:2022-12-16

258 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.