ForEach与Map区别详解

JavaScript中forEach和map虽同为数组迭代方法，却肩负截然不同的使命：forEach专注执行副作用操作（如累加、日志打印、DOM更新），不产生新数组且返回undefined；而map专精于数据转换，始终返回一个结构对应的新数组，支持链式调用且保持原数组纯净。选对方法不仅让代码意图更清晰、逻辑更健壮，还能在数据处理场景中显著提升可读性与可维护性——需要变换数据就用map，只需触发动作就用forEach。

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

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>

注意：forEach 不生成新数组，也不能直接链式调用其他数组方法（因为它返回 undefined）。

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。

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

今天关于《ForEach与Map区别详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于迭代方法的内容请关注golang学习网公众号！