前言

在JavaScript 中數(shù)組的遍歷 有很多中方法， 其中有一種 使用 foreach 來遍歷數(shù)組。

mdn官方文檔

語法：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

參數(shù)：

• callback

為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收一至三個參數(shù)：currentValue數(shù)組中正在處理的當前元素。index 可選數(shù)組中正在處理的當前元素的索引。array 可選forEach() 方法正在操作的數(shù)組。

• thisArg 可選

可選參數(shù)。當執(zhí)行回調(diào)函數(shù) callback 時，用作 this 的值。

在forEach 中傳入一個 callback 函數(shù)， 函數(shù)最多可以接收 三個值， 分別為當前正在遍歷的值， 當前值對應(yīng)的索引，以及當前數(shù)組本身

小試

現(xiàn)在有一個場景，我和我的室友們，現(xiàn)在在一個數(shù)組里面。 按照排行分別為: 老大，老二，老三, … ,老六, 小七.

var arr = ['Liu laoda', 'Li laoer', 'Wei laosan', 'Frank', 'Guan laowu', 'Yang laoliu', 'Li xiaoqi'];

// 在 forEach 中 傳入 一個function ，接收兩個參數(shù)
arr.forEach(function(name,index){
  console.log(name, ' - ',index);
})

結(jié)果如下： 第一個參數(shù)就是 當前遍歷的元素，第二參數(shù)為當前元素的索引

注意： forEach() 為每個數(shù)組元素執(zhí)行一次 callback 函數(shù) ，即每個元素都會執(zhí)行一次callback 函數(shù)

來看看回調(diào)函數(shù)的第三個參數(shù) ，表示 就是這個數(shù)組本身。

var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];

arr.forEach(function(name,index,person){
  console.log(name, ' - ',index);
  console.log(person);
})

還有一個參數(shù) thisArg 這個參數(shù)

當回調(diào)函數(shù)執(zhí)行的時候， 回調(diào)函數(shù)中 使用this 就是這個值。來看一個例子

var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];

// thisArg 此時傳入  {'name':'frank'},當回調(diào)函數(shù)執(zhí)行的時候，this 就是這個值。
arr.forEach(function(name,index){
  console.log(this);
},{'name':'frank'})

如果省略了 thisArg 參數(shù)，或者其值為 null 或 undefined，this 則指向全局對象。

var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];
// 沒有傳thisArg 參數(shù)
arr.forEach(function(name,index){
  // 此時是window
	console.log(this);
})

使用forEach注意事項

除了拋出異常以外，沒有辦法中止或跳出 forEach() 循環(huán)。如果你需要中止或跳出循環(huán)，forEach() 方法不是應(yīng)當使用的工具。

forEach 不支持 break這種語句退出循環(huán)。

如果你想在遍歷數(shù)組的過程中想要 提前終止循環(huán)，就不要使用 forEach 遍歷， 可以使用for 循環(huán)來遍歷數(shù)組.

例如：我只想遍歷到i==0 的時候，提前終止循環(huán)

var arr = ['Liu laoda', 'Li laoer', 'Wei laosan'];
for (let i = 0; i < arr.length; i++) {
    if (i === 1) {
        break;
    }
    console.log(arr[i],'-', i);
}

// Liu laoda - 0

到此這篇關(guān)于Javascript數(shù)組的 forEach 方法詳細介紹的文章就介紹到這了,更多相關(guān)JS  forEach內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論