js中forEach的用法之forEach與for之間的區(qū)別
一、定義和用法
forEach() 調(diào)用數(shù)組的每個(gè)元素,并將元素傳遞給回調(diào)函數(shù)。
- 注意:
forEach()對(duì)于空數(shù)組是不會(huì)執(zhí)行回調(diào)函數(shù)的。
用法:
array.forEach(function(currentValue, index, arr), thisValue)
1==> currentValue 必需。當(dāng)前元素2==> index 可選。當(dāng)前元素的索引值,是數(shù)字類型的3==> arr 可選。當(dāng)前元素所屬的數(shù)組對(duì)象4==> 可選。傳遞給函數(shù)的值一般用 "this" 值。
如果這個(gè)參數(shù)為空, "undefined" 會(huì)傳遞給 "this" 值
forEach 的注意點(diǎn):
forEach()本身是不支持的continue與break語句的。- 我們可以通
return語句實(shí)現(xiàn)continue關(guān)鍵字的效果
二、運(yùn)用場(chǎng)景
1.運(yùn)用的場(chǎng)景(計(jì)算數(shù)字之和)
計(jì)算數(shù)組所有元素相加的總和:
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = 0;
arr.forEach((currentIndex, index, curArr) => {
sum += currentIndex
// sum=sum+currentIndex
})
console.log('之和是', sum);
2.運(yùn)用的場(chǎng)景(給原始數(shù)組新增key值)
//給原始數(shù)組的每一項(xiàng)新增一個(gè)屬性值
let arr = [{
id: '001',
name: '張三1'
}, {
id: '002',
name: '張三2'
}, {
id: '003',
name: '張三2'
}];
//給原始數(shù)組的每一項(xiàng)新增一個(gè)屬性值
arr.forEach((item, index) => {
item['addAttrs'] = ''
})
console.log('arr', arr);
--使用for of來出處理--
for (let item of arr) {
item['index'] = ''
}
console.log('arr', arr);
三、forEach 跳出循環(huán)
1.forEach 跳出當(dāng)前的循環(huán) return
//內(nèi)容為3,不遍歷該項(xiàng)
var arr = [1, 2, 3];
arr.forEach(function(item) {
if (item === 3) {
return;
}
console.log(item);
});
2.forEach結(jié)合try跳出整個(gè)循環(huán)
- 找到id為002,然后終止整個(gè)循環(huán),返回當(dāng)前這一項(xiàng)的值。
- 使用
try-catch完成的
代碼如下:
let arr = [{
id: '001',
name: '張三1'
}, {
id: '002',
name: '張三2'
}, {
id: '003',
name: '張三2'
}];
// 使用forEach跳出整個(gè)循環(huán),使用rty-catch
function useForeach(Arr) {
let obj = {}
try {
Arr.forEach(function(item) {
if (item.id == '002') {
// 找到目標(biāo)項(xiàng),賦值。然后拋出異常
obj = item
throw new Error('return false')
}
});
} catch (e) {
// 返回id===002的這一項(xiàng)的數(shù)據(jù)
return obj
}
}
console.log(useForeach(arr))
3.forEach 與for循環(huán)的區(qū)別 【面試題】
1==> for可以用continue跳過當(dāng)前循環(huán)中的一個(gè)迭代,forEach 用continue會(huì)報(bào)錯(cuò)。但是可以使用return來跳出當(dāng)前的循環(huán)2==> for可以使用break來跳出整個(gè)循環(huán),forEach正常情況無法跳出整個(gè)循環(huán)。
如果面試官問:如果非要跳出forEach中的循環(huán),可以拋出一個(gè)異常來處理
到此這篇關(guān)于js中forEach的用法之forEach與for之間的區(qū)別的文章就介紹到這了,更多相關(guān)js forEach與fo的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框
Toast相信對(duì)于利用微信小程序開發(fā)的朋友們來說都不陌生,有時(shí)候官方的樣式并不能滿足業(yè)務(wù)要求,怎么辦呢,當(dāng)然有解決辦法了。有一個(gè)插件可以直接幫我們完成WeToast,這篇文章主要給大家介紹了微信小程序開發(fā)之實(shí)現(xiàn)自定義Toast彈框的相關(guān)資料,需要的朋友可以參考下。2017-06-06
JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(四)之邏輯OR運(yùn)算符詳解的相關(guān)資料,在JavaScript中,邏輯OR運(yùn)算符用||表示。本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-05-05
JavaScript中變量提升和函數(shù)提升實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中變量提升和函數(shù)提升的相關(guān)資料,以及JS變量提升和函數(shù)提升的順序,文中給出了詳細(xì)的介紹,需要的朋友可以參考下2021-07-07
js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容
這篇文章主要介紹了如何使用js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容,需要的朋友可以參考下2014-04-04
微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析
這篇文章主要介紹了微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
CocosCreator Typescript制作俄羅斯方塊游戲
目前關(guān)于cocos開發(fā)俄羅斯方塊的文章幾乎寥寥無幾,因此本文將主要介紹如何通過CocosCreator Typescript制作簡單的俄羅斯方塊游戲,代碼具有一定價(jià)值,感興趣的同學(xué)可以學(xué)習(xí)一下2021-11-11
不得不分享的JavaScript常用方法函數(shù)集(上)
不得不分享的JavaScript常用方法函數(shù)集,幫助大家更好的學(xué)習(xí)javascript程序設(shè)計(jì),有興趣的朋友可以參考一下2015-12-12

