Javascript數(shù)組的?forEach?方法詳細(xì)介紹

更新時(shí)間：2022年09月27日 10:11:32 作者：阿常囈語

這篇文章主要介紹了Javascript數(shù)組的forEach方法詳細(xì)介紹,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

前言

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

mdn官方文檔

語法：

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

參數(shù)：

callback

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

thisArg 可選

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

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

小試

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

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

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

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

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

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

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

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

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

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

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

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

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

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

使用forEach注意事項(xiàng)

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

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

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

例如：我只想遍歷到i==0 的時(shí)候，提前終止循環(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 方法詳細(xì)介紹的文章就介紹到這了,更多相關(guān)JS forEach內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: