JavaScript中forEach和map方法的使用与区别

前言

在上一节中，我们探讨了使用for循环进行数组遍历的方式。实际上，JavaScript还提供了另外两种更为高效的数组遍历手段，即forEach方法与map方法。接下来，我们将详细解析这两种方法的具体用法。

forEach方法

调用forEach()方法时，必须传入一个函数作为参数。

• 这种由开发者定义但不由开发者直接调用的函数，在编程中被称为回调函数。
• 数组包含多少个元素，该回调函数就会执行多少次。每次执行时，浏览器会将当前遍历到的元素以实参形式传递给回调函数，开发者可以通过定义形参来接收并处理这些数据。
• 浏览器在调用回调函数时，会传递以下三个参数：

第一个参数代表当前正在遍历的元素。

第二个参数代表当前正在遍历元素的索引位置。

第三个参数代表当前正在被遍历的整个数组对象。

map方法

map方法与forEach类似，同样需要传入一个函数作为参数。该函数作为回调函数使用时，也会接收相同的三个参数。

第一个参数是当前正在遍历的元素。

第二个参数是当前正在遍历元素的索引。

第三个参数是当前正在遍历的数组。

map和forEach方法的区别

以下示例截图源自牛客网。

通过观察上图可以发现，map方法会返回一个全新的数组，而forEach方法则不会返回任何值（返回undefined）。

补充：二者的应用场景

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方法的使用及其区别的介绍已完毕。如需了解更多相关js中forEach和map方法的内容，请搜索本站历史文章或继续浏览下方的相关文章。感谢大家的支持！