JavaScript中forEach和map方法的使用与区别
更新时间：2023年02月06日 16:21:50 作者：苏凉.py
众所周知map和forEach是数组的操作方法,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map方法的使用与区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
上节我们说到遍历数组的方法，使用for循环进行遍历，其实在js中还有另外两种方法可以将我们的数组更快的遍历出来，那就是forEach方法和map方法。下面我们一起看看如何使用吧。
forEach方法
forEach()方法需要一个函数作为参数
- 像这种函数，由我们创建但是不由我们调用的被称为回调函数。
- 数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以来定义形参来读取这些内容。
- 浏览器会在回调函数中传递三个参数:
第一个参数 - 当前正在遍历的元素
第二个参数 - 当前正在遍历的元素的索引
第三个参数 - 正在遍历的数组
map方法
同样的map方法和forEach方法一样，需要用到一个函数作为参数。该函数作为回调函数，同样该回调函数中传递三个参数。
第一个参数 - 当前正在遍历的元素
第二个参数 - 当前正在遍历的元素的索引
第三个参数 - 正在遍历的数组
map和forEach方法的区别
以下截图来自牛客网！
从上图来看，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方法的使用与区别的文章就介绍到这了,更多相关js中forEach和map方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript中的Window.open()用法示例详解
这篇文章主要给大家介绍了关于JavaScript中Window.open()用法的相关资料,今天在项目中用到了弹出子窗口,就想到了用JavaScript实现的两种方法,其中一个就是window.open(),需要的朋友可以参考下2023-07-07
所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式2017-03-03
微信小程序的开发过程中,有时前端需要获取到openId来使用,下面这篇文章主要给大家介绍了关于微信小程序获取用户openid的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-01-01
本篇文章主要是对js/jquery解析json和数组格式的方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
下面小编就为大家带来一篇JS两个数组比较,删除重复值的巧妙方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
详解javascript中原始数据类型Null和Undefined
这篇文章主要介绍了javascript中原始数据类型Null和Undefined的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了JavaScript实现可拖拽的拖动层Div的方法,拖拽页面中的div块可实现div块按照拖动轨迹移动的效果,涉及javascript鼠标事件、页面元素样式结合事件函数动态操作的相关技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript设计模式之迭代者模式详情，迭代器设计模式能够可以让我们更方便的且有规矩的进行访问复合数据的每一项，也可以通过迭代器进行完成一些流线式操作2022-06-06
MutationObserver监视对DOM 树所做更改的功能妙用
这篇文章主要为大家介绍了MutationObserver监视对DOM 树所做更改的功能妙用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要给大家介绍了关于three.js中文文档学习之通过模块导入的相关资料，文中通过示例代码介绍的非常详细，对大家学习或使用three.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
最新评论