js數(shù)組forEach實(shí)例用法詳解
1、forEach()類似于map()，它還將每個(gè)元素依次作用于傳入函數(shù)，但不會(huì)返回新的數(shù)組。
2、forEach()常用于遍歷數(shù)組，用于調(diào)用數(shù)組的每一個(gè)元素，并將其傳遞給回調(diào)函數(shù)。傳輸函數(shù)不需要返回值。
實(shí)例
var arr=[7,4,6,51,1];
try{arr.forEach((item,index)=>{
if (item<5) {
throw new Error("myerr")//創(chuàng)建一個(gè)新的error message為myerr
}
console.log(item)//只打印7 說(shuō)明跳出了循環(huán)
})}catch(e){
console.log(e.message);
if (e.message!=="myerr") {//如果不是咱們定義的錯(cuò)誤扔掉就好啦
throw e
}
}
知識(shí)點(diǎn)擴(kuò)展：
手寫 forEach
forEach()方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)
arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);
-
callback
- currentValue
數(shù)組中正在處理的當(dāng)前元素。 - index 可選
數(shù)組中正在處理的當(dāng)前元素的索引。 - array 可選
forEach() 方法正在操作的數(shù)組。 - thisArg 可選
可選參數(shù)。當(dāng)執(zhí)行回調(diào)函數(shù) callback 時(shí)，用作 this 的值。
- currentValue
- 沒(méi)有返回值
如果提供了一個(gè) thisArg 參數(shù)給 forEach 函數(shù)，則參數(shù)將會(huì)作為回調(diào)函數(shù)中的 this 值。否則 this 值為 undefined。回調(diào)函數(shù)中 this 的綁定是根據(jù)函數(shù)被調(diào)用時(shí)通用的 this 綁定規(guī)則來(lái)決定的。
let arr = [1, 2, 3, 4]; arr.forEach((...item) => console.log(item)); // [1, 0, Array(4)] 當(dāng)前值
function Counter() {
this.sum = 0;
this.count = 0;
}
// 因?yàn)?thisArg 參數(shù)（this）傳給了 forEach()，每次調(diào)用時(shí)，它都被傳給 callback 函數(shù)，作為它的 this 值。
Counter.prototype.add = function(array) {
array.forEach(function(entry) {
this.sum += entry;
++this.count;
}, this);
// ^---- Note
};
const obj = new Counter();
obj.add([2, 5, 9]);
obj.count;
// 3 === (1 + 1 + 1)
obj.sum;
// 16 === (2 + 5 + 9)
- 每個(gè)數(shù)組都有這個(gè)方法
- 回調(diào)參數(shù)為：每一項(xiàng)、索引、原數(shù)組
Array.prototype.forEach = function(fn, thisArg) {
var _this;
if (typeof fn !== "function") {
throw "參數(shù)必須為函數(shù)";
}
if (arguments.length > 1) {
_this = thisArg;
}
if (!Array.isArray(arr)) {
throw "只能對(duì)數(shù)組使用forEach方法";
}
for (let index = 0; index < arr.length; index++) {
fn.call(_this, arr[index], index, arr);
}
};
到此這篇關(guān)于js數(shù)組forEach實(shí)例用法詳解的文章就介紹到這了,更多相關(guān)js數(shù)組forEach方法的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
教你3分鐘利用原生js實(shí)現(xiàn)有進(jìn)度監(jiān)聽(tīng)的文件上傳預(yù)覽組件
這篇文章主要給大家介紹了關(guān)于如何3分鐘利用原生js實(shí)現(xiàn)有進(jìn)度監(jiān)聽(tīng)的文件上傳預(yù)覽組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了如何在TypeScript中處理日期字符串，主要通過(guò)輸入日期字符串來(lái)改善開(kāi)發(fā)者的體驗(yàn)并減少潛在的錯(cuò)誤，下文實(shí)現(xiàn)操作的分享需要的小伙伴可以參考一下2022-04-04
uni-app使用Vite.config.js配置文件的超詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于uni-app使用Vite.config.js配置文件的超詳細(xì)教程,在uniapp開(kāi)發(fā)中,vue.config.js是配置webpack的關(guān)鍵文件之一,也可以說(shuō)是uniapp項(xiàng)目自定義配置的中心,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了詳解JWT token心得與使用實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
js模仿windows桌面圖標(biāo)排列算法具體實(shí)現(xiàn)(附圖)
需要引入Jquery，如果需要全部功能，請(qǐng)引入jquery-ui和jquery-ui.css，具體實(shí)現(xiàn)步驟如下，感興趣的朋友可以參考下哈2013-06-06
JavaScript中的宏任務(wù)和微任務(wù)執(zhí)行順序
在?JavaScript?中，宏任務(wù)和微任務(wù)是指在執(zhí)行代碼的過(guò)程中的兩種不同的任務(wù)類型，這篇文章主要介紹了JavaScript中的宏任務(wù)和微任務(wù)執(zhí)行順序,需要的朋友可以參考下2022-12-12
JavaScript將字符轉(zhuǎn)換為ASCII碼的實(shí)現(xiàn)方法
在Web前端開(kāi)發(fā)中,字符編碼是處理文本數(shù)據(jù)時(shí)不可或缺的一部分,ASCII是一種廣泛使用的字符編碼標(biāo)準(zhǔn),它為每個(gè)字符分配了一個(gè)唯一的數(shù)字表示,解如何將字符轉(zhuǎn)換為ASCII碼,對(duì)于解析、生成和操作字符串具有重要意義,本文將詳細(xì)介紹這一過(guò)程,并提供多個(gè)實(shí)用的代碼示例2024-12-12
微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法
這篇文章主要介紹了微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
解析John Resig Simple JavaScript Inheritance代碼
上網(wǎng)也查了一下對(duì)些的理解說(shuō)的都不是很清楚. 在翻閱的同時(shí)找到了一篇 分析這篇文章的文章 哈哈 分析的很詳細(xì). (Join Resig 大師的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有時(shí)間, 并對(duì)此感興趣不訪好好看看. 我相信多少會(huì)有所收益的.2012-12-12
一個(gè)簡(jiǎn)單的JavaScript Map實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇一個(gè)簡(jiǎn)單的JavaScript Map實(shí)例(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08