JavaScript中forEach和map方法的使用與區(qū)別

更新時(shí)間：2023年02月06日 16:21:50 作者：蘇涼.py

眾所周知map和forEach是數(shù)組的操作方法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map方法的使用與區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

上節(jié)我們說(shuō)到遍歷數(shù)組的方法，使用for循環(huán)進(jìn)行遍歷，其實(shí)在js中還有另外兩種方法可以將我們的數(shù)組更快的遍歷出來(lái)，那就是forEach方法和map方法。下面我們一起看看如何使用吧。

forEach方法

forEach()方法需要一個(gè)函數(shù)作為參數(shù)

像這種函數(shù)，由我們創(chuàng)建但是不由我們調(diào)用的被稱(chēng)為回調(diào)函數(shù)。
數(shù)組中有幾個(gè)元素，函數(shù)就會(huì)執(zhí)行幾次，每次執(zhí)行時(shí)，瀏覽器會(huì)將遍歷到的元素以實(shí)參的形式傳遞進(jìn)來(lái)，我們可以來(lái)定義形參來(lái)讀取這些內(nèi)容。
瀏覽器會(huì)在回調(diào)函數(shù)中傳遞三個(gè)參數(shù):

第一個(gè)參數(shù) - 當(dāng)前正在遍歷的元素

第二個(gè)參數(shù) - 當(dāng)前正在遍歷的元素的索引

第三個(gè)參數(shù) - 正在遍歷的數(shù)組

map方法

同樣的map方法和forEach方法一樣，需要用到一個(gè)函數(shù)作為參數(shù)。該函數(shù)作為回調(diào)函數(shù)，同樣該回調(diào)函數(shù)中傳遞三個(gè)參數(shù)。

第一個(gè)參數(shù) - 當(dāng)前正在遍歷的元素

第二個(gè)參數(shù) - 當(dāng)前正在遍歷的元素的索引

第三個(gè)參數(shù) - 正在遍歷的數(shù)組

map和forEach方法的區(qū)別

以下截圖來(lái)自?？途W(wǎng)！

請(qǐng)?zhí)砑訄D片描述

從上圖來(lái)看，map方法會(huì)返回一個(gè)新的數(shù)組，而forEach方法不會(huì)，如圖所示。

補(bǔ)充：二者的應(yīng)用場(chǎng)景

forEach可用于單選多選框的綁定

let arr = [ 
      { name:'商品1', select:false }, 
      { name:'商品2', select:true }, 
      { name:'商品3', select:false }, 
      { name:'商品4', select:false }, 
    ]
 
 // 需求： 全選(設(shè)置每一個(gè)元素的select值為true)
    arr.forEach( (item,index) => {
      item.select = true
    } )
    console.log( arr )

map可用于對(duì)數(shù)組的批量操作

let arr = [ 20,50,88,60,56 ]
 
// 箭頭函數(shù)的函數(shù)體只有一行,則可以省略大括號(hào)。 此時(shí)也必須要省略return
    const res =  arr.map( item => item*0.5 )
    console.log(res)