前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js forEach和 map 区别

js forEach和 map 区别

作者头像
蓓蕾心晴
发布2022-12-06 13:53:23
4.6K0
发布2022-12-06 13:53:23
举报
文章被收录于专栏:前端小叙

Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

forEach() 方法按升序为数组中含有效值的每一项执行一次 callbackFn 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上,见下方的示例)。

可依次向 callbackFn 函数传入三个参数:

数组当前项的值 数组当前项的索引 数组对象本身

具体参考官方文档

特点:

  • forEach() 遍历的范围在第一次调用 callbackFn 前就会确定。
  • 调用 forEach 后添加到数组中的项不会被 callbackFn 访问到。
  • 如果已经存在的值被改变,则传递给 callbackFn 的值是 forEach() 遍历到他们那一刻的值。
  • 已删除的项不会被遍历到。如果已访问的元素在迭代时被删除了(例如使用 shift()),之后的元素将被跳过
  • forEach() 为每个数组元素执行一次 callbackFn 函数;与 map() 或者 reduce() 不同的是,它总是返回 undefined 值,并且不可链式调用。其典型用例是在一个调用链的最后执行副作用(side effects,函数式编程上,指函数进行 返回结果值 以外的操作)。
  • 不对未初始化的值进行任何操作(稀疏数组)
  • 不可以阻止循环,只能用 new Error 来抛出循环
  • 原数组如果全是基本数据类型,不会改变原数组,如果是引用数据类型,会改变原数组

Array.prototype.map()

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

具体见文档

map 方法会给原数组中的每个元素都按顺序调用一次 callbackFn 函数。callbackFn 每次执行后的返回值(包括 undefined)组合起来形成一个新数组。 callbackFn 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。

因为 map 生成一个新数组,当你不打算使用返回的新数组却使用 map 是违背设计初衷的,请用 forEach 或者 for-of 替代。

如果有以下情形,则不该使用 map

  • 你不打算使用返回的新数组;或
  • 你没有从回调函数中返回值。

特点:

  • map 不修改调用它的原数组本身(当然可以在 callbackFn 执行时改变原数组), 原数组如果全是基本数据类型,不会改变原数组,如果是引用数据类型,会改变原数组
  • 不可以阻止循环,只能用 new Error 来抛出循环
  • map 方法处理数组元素的范围是在 callbackFn 方法第一次调用之前就已经确定了。调用 map 方法之后追加的数组元素不会被 callbackFn 访问。如果存在的数组元素改变了,那么传给 callbackFn 的值是 map 访问该元素时的值。在 map 函数调用后但在访问该元素前,该元素被删除的话,则无法被访问到。
  • 根据规范中定义的算法,如果被 map 调用的数组是离散的,新数组将也是离散的保持相同的索引为空。
  • map因为返回数组所以可以链式操作,forEach不能
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-12-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Array.prototype.forEach()
  • Array.prototype.map()
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档