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

使用 JavaScript forEach() 循環數組,並附上示例

本文將向您展示如何使用 JavaScript forEach() 循環遍歷數組的方法。

幾乎任何復雜的應用程序都需要循環遍歷數據的數組(列表)。

JavaScript forEach() 方法,內置於 JavaScript array 變量,就是這樣做的。您會經常使用它 - 謝天謝地,它非常易於使用。

JavaScript forEach() 語法

arr.forEach(callback(currentValue[, index[, array]]) {
    // execute something
}[, thisArg]);

注意:

  • arr 是數組還是包含數組的變量
  • 回調 是對數組中每個元素執行的函數
  • 當前值 是數組中正在處理的當前元素,在回調函數中可用
  • 索引 可以選擇指定以獲取 currentValue 的索引 在處理數組並使其在回調函數中可用時
  • 數組 也可以選擇指定以使回調函數中正在處理的數組可用
  • thisArg 是用作 this 的值 執行回調時
    • 這個 是 JavaScript 中具有特殊含義的變量。無論在哪裡使用,它都是指它所屬的對象。
    • 如果這沒有意義,請不要擔心——它通常不與 forEach() 一起使用——隨著您進一步了解 JavaScript 和麵向對象編程,它會變得有意義
  • 此方法沒有返回值

JavaScript forEach () 例子

這是一個打印出 cars 數組中每個項目的示例 連同它存儲在數組中的索引:

var cars = ["ford", "holden", "lada", "fiat"];

cars.forEach(function(item, index){
    console.log(item + "exists at index" + index); // Will print the car name and the index it appears at
});

如果您想使用汽車 forEach 中的數組 回調函數正在執行時,您可以將其作為可選的第三個參數傳遞:

cars.forEach(function(item, index, theArray){
    console.log(theArray); // theArray will contain the cars array as it as passed as the third parameter above
});

很少使用且有點混亂的 thisArg 可以這樣使用:

var driverObject = { name: 'tim', age: 54 }; // An object with details of a car driver

cars.forEach(function(item){ 
    console.log(item); // Will print the item from the cars list 
    console.log(this.name); // Will print 'tim', as driverObject was passed as the value to use when referring to the variable called 'this'
}, driverObject)

同樣,如果 thisArg 沒有意義,沒關係,它很少使用,如果/何時使用它可能會有意義。

至於這個 它本身就是一個基本的 JavaScript 概念——在此處了解更多信息。


下一篇
No
Tutorial JavaScript 教程
  1. 如何點擊元素(對於整個文檔)?

  2. 垃圾郵件詐騙者

  3. JavaScript ES6 類中的私有屬性

  4. 使用 Python、Scrapy 和 MongoDB 抓取網站

  5. 如何確定 jQuery 滾動事件的方向?

  6. 你能幫我嗎

  7. 學習 Svelte 第 4 部分

  1. NodeJS + Express 第 4 部分:CRUD API

  2. 調試 React(重新)渲染組件的原因

  3. JavaScript Promise 組合子:race、all、allSettled、any

  4. 檢查字符串是否為數字

  5. 在 JavaScript 中生成 UUID 時發生衝突

  6. Vue.js 中用於用戶身份驗證的 Firebase

  7. 使用 jQuery 顯示/隱藏 div

  1. let var const - js 中的變量

  2. 通過 3 個步驟輕鬆創建帶有樣式組件的主題。 💅

  3. 使用 AJAX 動態加載框內容

  4. 這到底是怎麼工作的