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

js forEach和 map 区别

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

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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
js数组中一些实用的方法(forEach,map,filter,find)
需求场景: 假若后端返回这么一个json数据格式,如下所示,我们需要拿到返回对象中的数组项,或者根据某些指定的条件,取特定的值,然后渲染到页面当中去,例如:拿name属性值
itclanCoder
2020/10/28
2.9K0
js数组中一些实用的方法(forEach,map,filter,find)
JavaScript —— Array 使用汇总
由于 length 和 prototype 两个属性比较通用,所以这里不过多的介绍。
Originalee
2020/06/11
6180
JavaScript —— Array 使用汇总
js数组笔记
数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始)。整个数组用方括号表示,数组的值用','分割;数组的数据可以是任何类型。
bamboo
2019/01/29
11.8K0
js数组笔记
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。
程序员海军
2022/02/15
8010
爆 肝 一 周 总 结 最全 JavaScript Array 方法详解
最全 JavaScript Array 方法 详解
我们在日常开发中,与接口打交道最多了,前端通过访问后端接口,然后将接口数据二次处理渲染到页面当中。 二次处理的过程是 考验 Coder 对 Array 是否熟练 以及 在 何种 场景下使用哪种方法处理最优 。 小编,在最近开发中就遇到了 Array 问题, 在处理复杂的业务需求时,没想到Array 有类似的方法,然后将方法 组合起来解决当下问题。
程序员海军
2021/10/11
1.1K0
最全 JavaScript Array 方法 详解
js 数组详细操作方法及解析
目的:Array.of() 出现的目的是为了解决上述构造器因参数个数不同,导致的行为有差异的问题。
kif
2023/02/27
1.3K0
forEach和map的区别?
forEach和map是JavaScript中常用的数组迭代方法,它们有以下几个主要区别:
王小婷
2023/10/27
7440
Javascript数组操作
使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间;思虑下,堪能如此继续之?当狠心深学下方是正道。 一, 数组常用方法 1. 数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1
晚晴幽草轩轩主
2018/03/27
3.9K0
js中的四种for循环
最近刷题时遇到了几种不同for循环,因为没有深入了解导致做题时无法区分它们的用法,尤其是在以及在使用时的注意点。
用户7741497
2022/03/06
1.9K0
前端面试题---JS部分
转载链接:https://blog.csdn.net/qq_54753561/article/details/122149197
用户8087287
2022/10/31
7660
前端面试题---JS部分
原生 JavaScript 手写数组 API
本文将会先了解数组 API 的用法再模拟实现这些 API ,如果各位大佬觉得有什么不对的地方麻烦指点以下!
小丞同学
2021/08/16
7660
Js中Array对象
JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。
WindRunnerMax
2020/10/26
9.9K0
通过事例重温一下常见的 JS 中 15 种数组操作(备忘清单)
数组是 JS 中广泛使用的数据结构。数组对象提供了大量有用的方法,如array. forEach()、array.map()等来操作数组。
前端达人
2019/12/24
1.2K0
[第27 期]彻底分清Javascript forEach & map
JavaScript 中,数组的遍历我们肯定都不陌生,最常见的两个便是forEach 和 map。
皮小蛋
2020/03/02
4830
Js数组操作
JavaScript数组操作,主要包括Array对象原型方法以及常用操作如去重、扁平化、排序等。
WindRunnerMax
2020/08/27
16.9K0
JavaScript数组
数组实例的find()方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
六个周
2022/10/28
7210
for 循环的 5 种写法,哪种最快?
来源:juejin.im/post/5ea63f3ef265da47b177b4b6
Leetcode名企之路
2021/10/08
9780
前端学习(40)~js学习(十七):数组的常见方法&数组的遍历
unshift():在数组最前面插入一个或多个元素,返回结果为该数组新的长度。插入元素后,其他元素的索引会依次调整。
Vincent-yuan
2020/03/19
1.9K0
JavaScript中的forEach,你踩过哪些坑?请避开这些常见误区
在JavaScript的世界里,forEach是我们常用的数组遍历方法之一。大多数开发者都熟悉它的基础用法,但你知道吗?在处理异步操作时,forEach可能会让你掉进一些意想不到的“坑”。这篇文章将带你深入了解forEach的特性和局限,揭示一些你可能不知道的使用技巧和解决方案。无论你是前端新手,还是经验丰富的开发者,都能从中学到有用的知识,帮助你在实际项目中避开那些隐藏的陷阱。准备好了吗?让我们一探究竟!
前端达人
2024/11/25
2220
JavaScript中的forEach,你踩过哪些坑?请避开这些常见误区
JS数组常用方法大全
join(separator): 将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符,该方法只接收一个参数:即分隔符。
青梅煮码
2023/01/14
3K0
相关推荐
js数组中一些实用的方法(forEach,map,filter,find)
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文