JavaScript >> Javascript 文檔 >  >> Tags >> foreach

如何在 JavaScript 中使用 forEach() 循環

forEach() 循環是在 ES6 (ECMAScript 2015) 中引入的,它按升序對數組中的每個元素執行一次給定函數。它不會對空數組元素執行回調函數。

您可以使用此方法在 JavaScript 中遍歷數組和 NodeList。

遍歷數組

這是 Array.forEach() 的語法 方法:

array.forEach(callback(currentVal [, index [, array]])[, thisVal])

回調函數接受一到三個參數:

  • currentVal — 循環中當前元素的值
  • index — 當前元素的數組索引
  • arrayforEach() 的數組對象 循環被調用

只有第一個參數是必需的。其他兩個參數是可選的。您可以隨意命名這些變量。如果 thisVal 提供參數,它將用作回調的 this 價值。

以下示例演示瞭如何使用 forEach() 循環遍歷 JavaScript 中的數組:

const birds = ['🐦', '🦅', '🦆', '🦉'];

birds.forEach((item, index) => {
  console.log(`${index} : ${item}`);
});

這是輸出:

0 : 🐦
1 : 🦅
2 : 🦆
3 : 🦉

讓我們看另一個包含空值的示例數組:

const partialArray = [2, 4, , 3];

partialArray.forEach(num => console.log(num));

// output
// 2
// 4
// 3

如上所示,為空值跳過了回調函數。

Array.forEach() 僅方法 適用於數組,不適用於 NodeList。這意味著您不能使用它來遍歷使用 document.querySelectorAll() 獲得的元素 和類似的選擇器方法。

循環遍歷節點列表

幸運的是,NodeList 還提供了一個forEach() 類似於 Array.forEach() 的方法 , 但僅適用於 NodeLists,如下例所示:

const elems = document.querySelectorAll('div');

elems.forEach((elem, index) => {
  console.log(elem); // the elment
  console.log(index); // the index in the NodeList
});

跳過項目

for 循環,您可以使用 continue 輕鬆跳過當前項目 關鍵字或使用 break 完全停止循環。

forEach() 並非如此 方法。由於它對每個元素都執行了回調函數,所以除了拋出異常之外沒有辦法停止或中斷它。

但是,您可以有條件地檢查項目值並使用 return 語句跳過當前項目。例如,如果您想將除 Owl 之外的所有鳥類名稱記錄到控制台,您可以執行以下操作:

const birds = ['Eagle', 'Parrot', 'Owl', 'Sparrow'];

birds.forEach((item, index) => {

  // if `Owl`, skip it
  if (item === 'Owl') {
    return;
  }

  // otherwise log the bird name
  console.log(item);
});

瀏覽器兼容性

Array.forEach() 該功能適用於所有現代瀏覽器,包括 Internet Explorer 9 及更高版本。但是,您可以使用 polyfill 使其與 IE6 兼容。

NodeList.forEach() 除 Internet Explorer 外,所有最新的瀏覽器也支持該方法。你需要一個 polyfill 才能在 IE 中繼續使用它。


Tutorial JavaScript 教程
  1. 撲熱息痛.js💊| #90:解釋這段 JavaScript 代碼

  2. 在事件中動態更改 animateMotion SVG 元素的路徑

  3. 學習和修改 Js,第 1 天

  4. 模塊、包和其他常見 Web 開發術語的簡單定義要記住!

  5. 技術講座:如何通過構建可訪問的網絡來防止社會崩潰

  6. AWS Cognito 上的註冊前驗證

  7. JavaScript 對象字面量 |基本

  1. Next.js 中增量靜態再生的注意事項

  2. #Javascript:使用 Array.prototype.map() 函數。

  3. 使用 API 藍圖記錄您的 API

  4. JavaScript 中的默認參數 | ES6 | ES2015

  5. 如何為您的 Express API 創建錯誤處理程序

  6. JavaScript 控制台 API

  7. 使用 Nodejs 運行 PoseNet

  1. 終極備忘單彙編 (200+) - 🔥開發者路線圖 🚀 - 2

  2. PWA 的離線存儲

  3. 基於命令行的 Web 組合!

  4. 初學者的 JavaScript - 類型轉換