JavaScript中forEach和map方法的使用與區(qū)別
前言
上節(jié)我們說到遍歷數(shù)組的方法,使用for循環(huán)進(jìn)行遍歷,其實在js中還有另外兩種方法可以將我們的數(shù)組更快的遍歷出來,那就是forEach
方法和map
方法。下面我們一起看看如何使用吧。
forEach方法
forEach()方法需要一個函數(shù)作為參數(shù)
- 像這種函數(shù),由我們創(chuàng)建但是不由我們調(diào)用的被稱為回調(diào)函數(shù)。
- 數(shù)組中有幾個元素,函數(shù)就會執(zhí)行幾次,每次執(zhí)行時,瀏覽器會將遍歷到的元素以實參的形式傳遞進(jìn)來,我們可以來定義形參來讀取這些內(nèi)容。
- 瀏覽器會在回調(diào)函數(shù)中傳遞三個參數(shù):
第一個參數(shù) - 當(dāng)前正在遍歷的元素
第二個參數(shù) - 當(dāng)前正在遍歷的元素的索引
第三個參數(shù) - 正在遍歷的數(shù)組
map方法
同樣的map方法和forEach方法一樣,需要用到一個函數(shù)作為參數(shù)。該函數(shù)作為回調(diào)函數(shù),同樣該回調(diào)函數(shù)中傳遞三個參數(shù)。
第一個參數(shù) - 當(dāng)前正在遍歷的元素
第二個參數(shù) - 當(dāng)前正在遍歷的元素的索引
第三個參數(shù) - 正在遍歷的數(shù)組
map和forEach方法的區(qū)別
以下截圖來自??途W(wǎng)!
從上圖來看,map方法會返回一個新的數(shù)組,而forEach方法不會,如圖所示。
補充:二者的應(yīng)用場景
forEach可用于單選多選框的綁定
let arr = [ { name:'商品1', select:false }, { name:'商品2', select:true }, { name:'商品3', select:false }, { name:'商品4', select:false }, ] // 需求: 全選(設(shè)置每一個元素的select值為true) arr.forEach( (item,index) => { item.select = true } ) console.log( arr )
map可用于對數(shù)組的批量操作
let arr = [ 20,50,88,60,56 ] // 箭頭函數(shù)的函數(shù)體只有一行,則可以省略大括號。 此時也必須要省略return const res = arr.map( item => item*0.5 ) console.log(res)
總結(jié)
到此這篇關(guān)于JavaScript中forEach和map方法的使用與區(qū)別的文章就介紹到這了,更多相關(guān)js中forEach和map方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
document.getElementById的一些細(xì)節(jié)
document.getElementById的一些細(xì)節(jié)...2006-09-09javascript XML數(shù)據(jù)顯示為HTML一例
通過Javascript把xml轉(zhuǎn)換成html格式輸出一列2008-12-12js+html+css實現(xiàn)鼠標(biāo)移動div實例
移動div對于很多的網(wǎng)有們來說是一件很熟悉的事了,本文老生長談,用js實現(xiàn)鼠標(biāo)移動div,希望大伙們可以舉一反三,感興趣的朋友可以參考下,或許本文對你有所幫助2013-01-01寫了一個layout,拖動條連貫,內(nèi)容區(qū)可為iframe
寫了一個layout,拖動條連貫,內(nèi)容區(qū)可為iframe...2007-08-08你不知道的JS?ES6字符串標(biāo)簽函數(shù)分享
字符串標(biāo)簽函數(shù)是一種特殊的函數(shù)調(diào)用語法,本文將深入探討ES6中字符串標(biāo)簽函數(shù)的工作原理,并結(jié)合具體的代碼展示它的威力,快跟隨小編一起學(xué)習(xí)起來吧2023-06-06Bootstrap 3.x打印預(yù)覽背景色與文字顯示異常的解決
前幾天同事有個問題咨詢我,他在調(diào)用print()來打印頁面,發(fā)現(xiàn)打印預(yù)覽頁面上的背景色無法顯示以及文字總是顯示為黑色,感覺非常奇怪,我通過測試發(fā)現(xiàn)是Bootstrap的問題,現(xiàn)在將解決的方法分享給大家,希望可以幫助到同樣遇到這個問題的朋友們,下面來一起看看。2016-11-11