JavaScript中forEach和map方法的使用與區(qū)別
前言
上節(jié)我們說到遍歷數(shù)組的方法，使用for循環(huán)進行遍歷，其實在js中還有另外兩種方法可以將我們的數(shù)組更快的遍歷出來，那就是forEach方法和map方法。下面我們一起看看如何使用吧。
forEach方法
forEach()方法需要一個函數(shù)作為參數(shù)
- 像這種函數(shù)，由我們創(chuàng)建但是不由我們調(diào)用的被稱為回調(diào)函數(shù)。
- 數(shù)組中有幾個元素，函數(shù)就會執(zhí)行幾次，每次執(zhí)行時，瀏覽器會將遍歷到的元素以實參的形式傳遞進來，我們可以來定義形參來讀取這些內(nèi)容。
- 瀏覽器會在回調(diào)函數(shù)中傳遞三個參數(shù):
第一個參數(shù) - 當前正在遍歷的元素
第二個參數(shù) - 當前正在遍歷的元素的索引
第三個參數(shù) - 正在遍歷的數(shù)組
map方法
同樣的map方法和forEach方法一樣，需要用到一個函數(shù)作為參數(shù)。該函數(shù)作為回調(diào)函數(shù)，同樣該回調(diào)函數(shù)中傳遞三個參數(shù)。
第一個參數(shù) - 當前正在遍歷的元素
第二個參數(shù) - 當前正在遍歷的元素的索引
第三個參數(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)文章
這篇文章主要介紹了JS實現(xiàn)多物體緩沖運動實例代碼，有需要的朋友可以參考一下2013-11-11
JavaScrip實現(xiàn)一個有時間限制的緩存類的方式
本文將探索 JavaScript 中一種基于自動過期機制的時間限制緩存實現(xiàn)方式,提高數(shù)據(jù)緩存策略的靈活性和效率,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
在用js寫網(wǎng)頁時，如果html等內(nèi)容全部用document.write輸出，包括<html>、<meta等標簽，當嵌套時，會出現(xiàn)輸出內(nèi)容為亂碼的問題2009-08-08
下面小編就為大家?guī)硪黄狫S實現(xiàn)圖片的不間斷連續(xù)滾動的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
代碼生成器 document.write()...2007-04-04
這篇文章主要介紹了PHP中使用微秒計算腳本執(zhí)行時間例子,本文先是講解了microtime函數(shù)的一些知識,然后給出了一個計算腳本運行時間的類,需要的朋友可以參考下2014-11-11
Js Jquery創(chuàng)建一個彈出層可加載一個頁面
Js Jquery創(chuàng)建一個彈出層，當加載一個頁面進彈出層時出現(xiàn)亂碼，示例代碼如下，大家可以參考參考2014-05-05
這篇文章主要介紹了js實現(xiàn)的簡單radio背景顏色選擇器代碼,利用鼠標事件及頁面元素動態(tài)操作實現(xiàn)頁面背景顏色的改變功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件詳解
“工欲善其事，必先利其器” 恩，這句話我覺得說的特別有道理，下面這篇文章主要給大家介紹了關(guān)于利用chrome瀏覽器進行js調(diào)試并找出元素綁定的點擊事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下2018-09-09
JS實現(xiàn)unicode和UTF-8之間的互相轉(zhuǎn)換互轉(zhuǎn)
需要將PC送過來的UTF-8轉(zhuǎn)換成UNICODE才能將內(nèi)容通過短信發(fā)送出去，同樣，接收到的短信為unicode編碼，也許轉(zhuǎn)換成UTF-8才能在PC端軟件顯示出來2017-07-07