當前位置:網站首頁>JS中的forEach()和map()方法介紹
JS中的forEach()和map()方法介紹
2022-01-27 22:09:46 【.ToString()°】
JS中的forEach()和map()方法介紹
forEach()
forEach 是ES5擴展的語法,可以使用它遍曆數組,對象。forEach()方法用於調用數組的每個元素,並將元素傳遞給回調函數。
注意:forEach()對於空數組是不會執行回調函數的,並且它不會改變原數組
語法:
array.forEach(function(currentValue,index,arr),thisValue)
- 參數 :回調函數function(currentValue,index,arr) 必需,數組中每個元素需要調用的函數。
函數參數:currentValue(必需):當前元素,index(可選):當前元素的索引值, arr(可選):當前元素所屬的數組對象(可以理解為當前遍曆的數組對象)。
thisValue(可選):傳遞給函數的值一般用"this"值。如果這個參數為空,"undefined"會傳遞給"this"值。
簡單的例子:
let sum = 0;
let arr = [1,2,3,4];
const myFunction = (item)=>{
sum += item;
}
arr.forEach(myFunction);
console.log(sum);//10
//我們一般直接將回調函數寫到裏面
let num1 = 0;
arr.forEach((item,index,arr)=>{
num1 += item;
})
console.log(num1)//10
但是要注意的是:在forEach中不支持continue、break關鍵字。
- 我們可以使用return來跳出當次循環,相當於continue。
let arr = [1,2,3,4,5];
arr.forEach((item)=>{
if(item == 3) return;
console.log(item);
});
// 運行後,我們發現3被跳過了
- 我們可以利用 try catch/every代替 break, 這裏統一為遍曆到3結束
- 利用try catch代替break
try{ let arr = [1,2,3,4,5]; arr.forEach((item)=>{ console.log(item) if(item == 3) throw new Error("EndTterative"); }) }catch(e){ if(e.message!="EndTterative") throw e; }
- 利用every()代替break
let arr = [1,2,3,4,5]; arr.every((item)=>{ console.log(item); return item !== 3; })
map()
map()方法是ES6的新語法,和forEach類似。它返回一個新數組,數組中的元素為原始數組元素調用函數處理後的值。map()方法按照原始數組元素順序依次處理元素。
注意:map()不會對空數組進行檢測,map()不會改變原始數組
語法:
array.map(function(currentValue,index,arr),thisValue)
- 參數:回調函數function(currentValue,index,arr) 必需,數組中每個元素需要調用的函數。
函數參數:currentValue(必需):當前元素,index(可選):當前元素的索引值, arr(可選):當前元素屬於的數組對象(可以理解為當前遍曆的數組對象)。
thisValue(可選):對象作為該執行回調時使用,傳遞給函數,用作"this"的值。如果省略了thisValue,或者傳入null、undefined,那麼回調函數的this為全局對象。
簡單例子
//擴大5倍,並返回新數組
let arr = [1,2,3,4,5];
let newArr = arr.map((item)=>{
return item * 5;
})
console.log(newArr);//[5,10,15,20,25]
- map()同樣不支持break和continue。map()中的return 是將每次迭代遍曆時處理後的元素添加到map()返回值中。調用map()的返回值是一個新數組,新數組中的每個元素為每次map()迭代時return的值。
版權聲明
本文為[.ToString()°]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201272209458480.html
邊欄推薦
猜你喜歡
隨機推薦
- uniapp上傳圖片及組件傳值
- 瑞利年金險資金保障安全嗎?收益高不高啊?
- 華為手機USB連不上電腦的解决方法
- Flutter 2,移動金融應用開發
- 關於st25系列NFC標簽簡單介紹及st25TV系列用於門禁讀取時的注意事項總結
- 關於用ffmpeg轉手機視頻發現視頻長寬倒了的問題
- 函數 / 類模板--模板2
- 數組中的第k個最大的元素--優先級隊列、排序、堆、排序
- 單片機實例27——ADC0809A/D轉換器基本應用技術(硬件電路圖+匯編程序+C語言程序)
- Collection集合的學習
- 一場面試結束,某度員工從事Android 5年為何還是初級工程師?
- 3本書閱讀筆記【人月神話-Go語言實戰-研發能力持續成長路線】01
- PHP垃圾回收機制
- 【電子技術】什麼是LFSR?
- 死鎖?如何定比特到死鎖?如何修複死鎖?(jps和jstack兩個工具)
- 快樂寒假 22/01/20
- image
- 噴程序員?SURE?
- LDO分壓電阻計算小工具
- 面試之求一串字符串中每個字符的出現次數
- 【ISO15765_UDS&OBD診斷】-01-概述
- 【Mysql上分之路】第九篇:Mysql存儲引擎
- RHCE 第一次作業
- 2021.10.16我的第一篇博客:一切皆有可能!
- CTA-敏感行為-讀取IMEI
- 面試被問怎麼排查平時遇到的系統CPU飆高和頻繁GC,該怎麼回答?
- nuxt項目總結-綜合
- 自然語言處理學習筆記(一)
- C語言第一課
- 各比特大佬,Spark的重點難點系列暫時更新完畢
- 基於 esbuild 的 universal bundler 設計
- XCTFre逆向(四):insanity
- 理解什麼是真正的並發數
- JVM腦圖
- 【Pytorch(四)】學習如何使用 PyTorch 讀取並處理數據集
- 函數棧幀的創建與銷毀
- 構建神經網絡- 手寫字體識別案例
- 多模態生成模型ERNIE-VILG
- kotlin不容忽視的小細節
- 備戰一年,終於斬獲騰訊T3,我堅信成功是可以複制的