JavaScript 中 forEach() 和 Map() 的区别

wxin55 2025-02-04 16:34 7 浏览 0 评论

大家好，今天我们来聊聊一些对于大多数初学者来说可能比较模糊的高级 JS 数组函数。

下面是这些数组函数的代码片段，

array.forEach((item) => {
      // your code
});const mapArr = array.map((item) => {
     // some code
     return;   //In map() function must always return some value
});

在这里， forEach() 只是循环一些东西，它会执行函数所说的任何事情。并且使用 map() 我们遍历每个项目并返回一个新数组。

嘿，两者似乎做同样的事情，对吧？但它们之间有一个关键的区别。每当我们想要做一个简单的循环并对我们使用 map() 的数组执行操作时，它对操作有限制，它期望操作返回一个元素。本质上，map() 遍历一个数组，对每个元素应用操作，最后将每次调用操作的结果存储到另一个数组中。另一方面，使用 forEach() 操作可能什么也不做，我们可以完全留空或在控制台上打印一些东西，因为所有 forEach() 关心的是遍历元素集合并应用我们告诉它的任何操作对每个元素做。换句话说，map() 转换数组并从中创建一个新数组，而 foreEach() 基于数组执行一系列操作。

在 forEach() 中，要返回一个新数组，我们必须首先创建自己的数组，然后将这些元素压入其中。

让我们通过一个例子来理解，

const arr = [1, 2, 3, 4]
const squaredArr = [];
arr.forEach((item) => {
squaredArr.push(item * item)
})

在上面的代码中，我们创建了一个单独的数组来存储操作的值。现在让我们看看它在 map() 中的样子，

const squaredArr = arr.map((item) => {
return item * item;
})

现在就是这样。

感谢您抽出时间来阅读！希望这篇文章对您有所帮助，稍后再见！

js 判断是数组

上一篇：数组-一文搞定前缀和数组（数组前缀和c语言）
下一篇：Spring Boot项目接收前端参数的11种方式

JavaScript 中 forEach() 和 Map() 的区别

相关推荐

取消回复欢迎你发表评论:

写给新手|头条文章如何排版更美观?电脑端教程

「基本功」前端安全系列之二:如何防止CSRF攻击?

MySQL InnoDB乐观锁，悲观锁(共享锁|排它锁)，行锁表锁及死锁

如何应用策略设计模式分离JDBC数据库连接中的外部环境信息

视频讲解学员信息管理系统升级版（学员管理系统培训机构）

字符串:听说你对KMP还有这些疑问?

同一套网络直播源，为什么别人能用自己却用不了?

深入细聊前端下载总结「干货」（前端软件下载）

JavaScript 实现点击/关闭全屏（怎么关闭javascript弹出框）

黑马程序员:IT技术学习线路图免费任性分享

JavaScript 中 forEach() 和 Map() 的区别

相关推荐

取消回复欢迎 你 发表评论:

写给新手|头条文章如何排版更美观?电脑端教程

「基本功」前端安全系列之二:如何防止CSRF攻击?

MySQL InnoDB乐观锁，悲观锁(共享锁|排它锁)，行锁表锁及死锁

如何应用策略设计模式分离JDBC数据库连接中的外部环境信息

视频讲解学员信息管理系统升级版（学员管理系统 培训机构）

字符串:听说你对KMP还有这些疑问?

同一套网络直播源，为什么别人能用自己却用不了?

深入细聊前端下载总结「干货」（前端软件下载）

JavaScript 实现点击/关闭全屏（怎么关闭javascript弹出框）

黑马程序员:IT技术学习线路图免费任性分享

取消回复欢迎你发表评论:

视频讲解学员信息管理系统升级版（学员管理系统培训机构）