详解JavaScript中map()和forEach()的异同
前言
在JavaScript中，map()和forEach()是两个常用的数组方法，它们都用于遍历数组，但在某些方面有一些关键的区别。本文将详细讨论这两种方法的异同，以帮助您更好地理解它们的用法和适用场景。
返回值
map()： map()方法创建一个新数组，其中包含对原始数组的每个元素应用回调函数的结果。
const numbers = [1, 2, 3]; const doubled = numbers.map(num => num * 2); // doubled: [2, 4, 6]
map()通过对每个元素执行回调函数来生成新数组，原始数组不会被改变。
forEach()： forEach()方法仅用于迭代数组中的每个元素，而不返回新数组。它的主要目的是执行回调函数，而不关心返回值。
const numbers = [1, 2, 3]; numbers.forEach(num => console.log(num)); // 输出：1, 2, 3
由于map()返回一个新数组，因此它通常用于对原始数组进行转换，而原数组保持不变。而forEach()主要用于对数组元素进行迭代，执行一些操作，但不会创建新的数组。因此，在需要获取处理结果的情况下，map()更为合适。
可链性
map()： 由于map()返回一个新数组，因此可以链式调用多个数组方法。
const numbers = [1, 2, 3]; const squaredAndDoubled = numbers.map(num => num * 2).map(num => num ** 2); // squaredAndDoubled: [4, 16, 36]
forEach()： forEach()方法返回undefined，不支持链式调用。
中断迭代
map()： 由于map()返回一个新数组，您可以通过在回调函数中使用return语句来提前终止迭代。
const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => {
if (num > 3) return;
return num ** 2;
});
// squared: [1, 4, 9, undefined, undefined]
forEach()： forEach()无法提前终止迭代。 如果需要中断，可以通过在回调函数中抛出异常。
const numbers = [1, 2, 3, 4, 5];
try {
numbers.forEach(num => {
if (num > 3) throw BreakException;
console.log(num);
});
} catch (e) {}
性能
通常来说，map()的性能稍微低于forEach()，因为map()需要创建一个新数组。
使用场景
map()的使用场景：
数据转换： 当需要对数组中的每个元素执行某种操作，并将结果组成一个新的数组时，map()是首选。
const numbers = [1, 2, 3]; const squared = numbers.map(num => num ** 2); // squared: [1, 4, 9]
提取特定属性： 适用于从对象数组中提取特定属性形成新数组。
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
const userIds = users.map(user => user.id);
// userIds: [1, 2, 3]
forEach()的使用场景：
迭代数组： 当只需要遍历数组执行某个操作，而不需要生成新的数组时，forEach()是更直接的选择。
const numbers = [1, 2, 3];
let sum = 0;
numbers.forEach(num => {
console.log(num);
sum += num;
});
// 输出：1, 2, 3
// sum: 6
操作全局变量： 可以在forEach()循环中更改外部变量的值。
const numbers = [1, 2, 3];
let sum = 0;
numbers.forEach(num => {
sum += num;
});
// sum: 6
结论
总的来说，map()和forEach()在某些方面有所不同，因此在选择使用它们时需要根据具体需求权衡其优缺点。如果需要生成一个新数组并对每个元素进行操作，则使用map()；如果只是需要迭代数组并执行一些操作，而不关心返回值，则使用forEach()。
以上就是详解JavaScript中map()和forEach()的异同的详细内容，更多关于JavaScript map()和forEach()异同的资料请关注脚本之家其它相关文章！
相关文章
本文主要介绍了JavaScript中return返回多个值的三个方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了JS遍历对象属性的方法,涉及JS针对页面元素属性遍历操作的相关技巧,需要的朋友可以参考下2017-01-01
这篇文章主要为大家详细介绍了JavaScript如何利用Canvas实现绘制简单的柱状图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
在设计网页时,有时需要静态或动态地隐藏标签或显示被隐藏的标签,那该怎么实现呢?这篇文章主要给大家介绍了关于使用js实现html标签、文本的隐藏、显示、删除及添加的相关资料,需要的朋友可以参考下2023-06-06
只能输入数字在以往都是使用replace方法实现的，在本文你将学习到不使用它依然可以实现，具体代码如下，感兴趣的朋友可以参考下2013-09-09
本文为大家介绍下如何解决js中window.open弹出的是上次的缓存页面的问题，下面有个不错的示例，感兴趣的额朋友可以参考下2013-12-12
本文主要介绍JS原型链的知识，这里整理了相关资料及简单实现示例代码，有兴趣的小伙伴可以参考下2016-09-09
文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理，文中给大家提到了几种文件指纹的设置用法，对Webpack文件指纹相关知识感兴趣的朋友一起看看吧2022-02-02
这篇文章主要为大家详细介绍了JavaScript实现飞舞的泡泡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要介绍了JS如何根据当前日期获取一周所有日期,文中通过实例代码补充介绍了js获取当前一周的时间,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
最新评论