0

0

JavaScript迭代方法_ForEach与Map

betcha

betcha

发布时间:2025-11-27 12:23:33

|

803人浏览过

|

来源于php中文网

原创

foreach用于执行操作且返回undefined,适合处理副作用;map用于数据转换并返回新数组,支持链式调用,应根据是否需要新数组选择方法。

javascript迭代方法_foreach与map

在JavaScript中,forEachmap 是数组常用的迭代方法,它们都能遍历数组元素,但用途和返回值有本质区别。理解两者的差异有助于写出更清晰、更高效的代码。

forEach:执行操作,不返回新数组

forEach 方法用于对数组中的每个元素执行一个提供的函数,它没有返回值(或者说返回 undefined)。适合用于执行副作用操作,比如修改外部变量、输出日志、操作DOM等。

示例:

const numbers = [1, 2, 3];
let sum = 0;
<p>numbers.forEach(num => {
sum += num;
});</p><p>console.log(sum); // 输出 6</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记(深入)</a></a>”;</p>

注意:forEach 不生成新数组,也不能直接链式调用其他数组方法(因为它返回 undefined)。

光子AI
光子AI

AI电商服饰商拍平台

下载

map:转换数据,返回新数组

map 方法创建一个新数组,其结果是原数组中每个元素调用提供的函数后的返回值。它不会改变原始数组,而是返回一个经过“映射”后的新数组。适用于需要转换数据的场景。

示例:

const numbers = [1, 2, 3];
<p>const doubled = numbers.map(num => num * 2);</p><p>console.log(doubled); // 输出 [2, 4, 6]
console.log(numbers); // 原数组不变:[1, 2, 3]</p>

map 的核心是数据转换,常用于处理 API 返回的数据、渲染列表(如 React 中的 JSX 映射)等。

关键区别总结

  • 返回值:forEach 返回 undefined;map 返回一个新数组。
  • 用途:forEach 用于执行操作;map 用于数据转换。
  • 链式调用:map 支持链式调用(如 map().filter().sort());forEach 不支持。
  • 性能:如果不需要新数组,forEach 可能略快,但通常差异不大。

选择哪个方法,取决于你是否需要生成新的数据集合。需要新数组就用 map,只做操作就用 forEach。

基本上就这些,用对场景才高效。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
sort排序函数用法
sort排序函数用法

sort排序函数的用法:1、对列表进行排序,默认情况下,sort函数按升序排序,因此最终输出的结果是按从小到大的顺序排列的;2、对元组进行排序,默认情况下,sort函数按元素的大小进行排序,因此最终输出的结果是按从小到大的顺序排列的;3、对字典进行排序,由于字典是无序的,因此排序后的结果仍然是原来的字典,使用一个lambda表达式作为key参数的值,用于指定排序的依据。

409

2023.09.04

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

225

2025.12.04

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

40

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

67

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

47

2025.11.27

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

6230

2023.07.31

网页undefined是什么意思
网页undefined是什么意思

网页undefined是指页面出现了未知错误的意思,提示undefined一般是在开发网站的时候定义不正确或是转换不正确,或是找不到定义才会提示undefined未定义这个错误。想了解更多的相关内容,可以阅读本专题下面的文章。

3312

2024.08.14

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

1

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
微信小程序开发之API篇
微信小程序开发之API篇

共15课时 | 1.3万人学习

Webpack4.x---十天技能课堂
Webpack4.x---十天技能课堂

共20课时 | 1.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号