面试导航 - 程序员面试题库大全 | 前端后端面试真题 | 面试

forEach 和 map 是 JavaScript 中的两个数组方法，它们都可以用来遍历数组并对数组的每个元素执行操作，但它们之间有一些关键的区别。下面我会详细讲解这两个方法的功能和它们的区别。

forEach 方法

forEach 是一个用于遍历数组的数组方法，它会对数组的每一项执行给定的回调函数。它不会返回任何值，主要用于遍历操作。

它的语法语法如下：

array.forEach(function (element, index, array) {
  // 对每个元素执行的操作
});

• element：当前数组元素的值。

• index（可选）：当前元素的索引。

• array（可选）：原始数组。

它的特点主要有以下几个方面：

• 没有返回值：forEach 总是返回 undefined，即它没有返回新的数组，完全是为了执行副作用（比如打印、修改外部变量等）。

• 不能中途退出：forEach 遍历数组时会一直执行直到遍历完整个数组。它不能在执行过程中使用 break 或 return 来停止执行。虽然可以通过 throw 抛出异常来停止，但这通常不是最佳做法。

• 不能链式调用：由于 forEach 没有返回值，因此不能像 map 一样链式调用其他数组方法。

如下代码示例所示：

const arr = [1, 2, 3, 4, 5];
arr.forEach((item, index) => {
  console.log(item); // 输出 1, 2, 3, 4, 5
});

map 方法

map 也是一个遍历数组的数组方法，它会对数组的每个元素执行指定的回调函数，并返回一个新数组，新的数组包含了回调函数的返回值。

它的语法语法如下：

const newArray = array.map(function (element, index, array) {
  // 返回新数组的每个元素
  return transformedElement;
});

• element：当前数组元素的值。
• index（可选）：当前元素的索引。
• array（可选）：原始数组。

它的特点主要有以下几个方面：

• 返回新数组：map 会返回一个新的数组，新数组的每个元素是通过回调函数返回的结果。因此，map 总是返回一个和原数组长度相同的新数组。
• 不会修改原数组：map 返回的新数组是一个全新的数组，原数组保持不变。
• 适合变换数组：map 的主要用途是基于原数组生成一个新的数组，通常用于元素的转换或映射。

如下代码示例所示：

const arr = [1, 2, 3, 4, 5];
const newArr = arr.map((item) => item * 2); // 新数组： [2, 4, 6, 8, 10]
console.log(newArr); // 输出 [2, 4, 6, 8, 10]

forEach 和 map 的区别

总结

• forEach 适用于遍历数组并执行副作用，如打印信息、修改外部状态等，但它不返回新数组，不能用来生成新的数组。

• map 适用于转换数组，返回一个新数组，并且可以链式调用。

选择使用 forEach 还是 map 取决于你的需求。如果你只是需要遍历并执行一些副作用操作，使用 forEach；如果你需要基于原数组生成一个新的数组，使用 map。