欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2023年02月06日 16:21:50   作者：蘇涼.py  
眾所周知map和forEach是數組的操作方法,下面這篇文章主要給大家介紹了關于JavaScript中forEach和map方法的使用與區(qū)別,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

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

forEach方法

forEach()方法需要一個函數作為參數

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

第一個參數 - 當前正在遍歷的元素

第二個參數 - 當前正在遍歷的元素的索引

第三個參數 - 正在遍歷的數組

map方法

同樣的map方法和forEach方法一樣，需要用到一個函數作為參數。該函數作為回調函數，同樣該回調函數中傳遞三個參數。

第一個參數 - 當前正在遍歷的元素

第二個參數 - 當前正在遍歷的元素的索引

第三個參數 - 正在遍歷的數組

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

以下截圖來自?？途W！

請?zhí)砑訄D片描述

從上圖來看，map方法會返回一個新的數組，而forEach方法不會，如圖所示。

補充：二者的應用場景

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

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

map可用于對數組的批量操作

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

總結

到此這篇關于JavaScript中forEach和map方法的使用與區(qū)別的文章就介紹到這了,更多相關js中forEach和map方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論