本文详细解析JavaScript中map()与forEach()的核心区别。map()返回新数组，支持链式调用与提前终止，适合数据转换；forEach()返回undefined，主要用于执行副作用操作。通过返回值、链式调用、中断迭代及性能四个维度对比，帮助开发者根据场景选择合适方法。
前言
在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()异同的资料请关注本站其它相关文章！