在 Ja vaScript 里，map和forEach都属于数组常用方法，核心作用都是遍历数组，并对其中的每个元素执行指定操作。

它们看起来很像，但实际使用时有几个关键区别。重点在于：是否需要返回新数组，以及操作的目的到底是“生成结果”还是“执行处理”。

1. 返回值

• map会返回一个新数组，数组中的每个元素是回调函数的返回值。
• forEach没有返回值，返回的是undefined。

const numbers = [1, 2, 3, 4];

// 使用map
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

// 使用forEach
numbers.forEach(num => console.log(num * 2)); // 输出2, 4, 6, 8，但没有返回数组

2. 用途

• map适用于需要对数组中的每个元素进行转换并生成新数组的情况。
• forEach适用于仅需对数组中的每个元素执行操作而不需要新数组的情况。

const names = ['Alice', 'Bob', 'Charlie'];

// 使用map进行转换
const uppercasedNames = names.map(name => name.toUpperCase());
console.log(uppercasedNames); // ['ALICE', 'BOB', 'CHARLIE']

// 使用forEach进行操作
names.forEach(name => console.log(name.toLowerCase())); // 输出alice, bob, charlie

3. 链式调用

由于map返回一个新数组，所以可以与其他数组方法进行链式调用。

forEach不支持链式调用，因为它返回的是undefined。

const numbers = [1, 2, 3, 4];

// 使用map进行链式调用
const result = numbers.map(num => num * 2).filter(num => num > 5);
console.log(result); // [6, 8]

// 使用forEach不能链式调用
numbers.forEach(num => num * 2).filter(num => num > 5); // TypeError: Cannot read property 'filter' of undefined

4. 性能

在性能方面，map和forEach的表现通常相似。

但由于map会创建一个新数组，因此在处理大量数据时，map可能会稍慢一些。

5. 其他注意事项

• map和forEach都接受三个参数：当前元素、当前索引和原数组。
• 使用forEach时，可以使用break和continue控制循环，但这对于map是不可行的，因为它不支持短路。

const numbers = [1, 2, 3, 4];

// 使用forEach中的break（需要使用try-catch）
try {
  numbers.forEach(num => {
    if (num > 2) throw 'Break';
    console.log(num); // 输出1, 2
  });
} catch (e) {
  console.log(e); // 输出'Break'
}

// map不支持短路
const result = numbers.map(num => {
  if (num > 2) return 'Break'; // 这并不会停止map
  return num;
});
console.log(result); // [1, 2, 'Break', 'Break']

总结

map和forEach都是处理数组时非常常用的工具，但两者的使用场景并不一样。

如果需要得到一个新的数组，适合用map；如果只是遍历并执行操作，不需要返回结果，则更适合用forEach。