ECMAScript 2015（ES6）forEach 和 map 方法的比较-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对数组进行遍历和操作。ES6中引入了forEach和map两种方法，它们都可以用来遍历数组，但是它们的使用方式和返回结果有所不同。本文将对它们进行详细的比较，并给出一些使用指南和示例代码。

forEach 方法

forEach方法是一个数组的遍历方法，它可以对数组中的每个元素执行一个回调函数。回调函数接受三个参数：当前元素的值、当前元素的索引和数组本身。forEach方法没有返回值，它只是对数组进行了操作。

下面是一个使用forEach方法的简单示例：

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  console.log(item, index, array);
});

输出结果为：

1 0 [1, 2, 3]
2 1 [1, 2, 3]
3 2 [1, 2, 3]

我们可以看到，forEach方法遍历了数组中的每个元素，并将它们的值、索引和数组本身输出了出来。

map方法也是一个数组的遍历方法，它可以对数组中的每个元素执行一个回调函数，并返回一个新的数组。回调函数接受三个参数：当前元素的值、当前元素的索引和数组本身。map方法返回一个新的数组，它的长度和原数组相同，但是每个元素的值都是经过回调函数处理后的结果。

下面是一个使用map方法的简单示例：

const arr = [1, 2, 3];
const newArr = arr.map((item, index, array) => {
  return item * 2;
});
console.log(newArr);

输出结果为：

[2, 4, 6]

我们可以看到，map方法遍历了数组中的每个元素，并将它们的值乘以2后返回了一个新的数组。

虽然forEach和map方法都可以用来遍历数组，但是它们的使用方式和返回结果有所不同。我们可以根据具体的需求来选择使用哪种方法。

forEach方法没有返回值，它只是对数组进行了操作。如果我们只需要遍历数组并对每个元素进行一些操作，而不需要返回一个新的数组，那么可以使用forEach方法。
map方法返回一个新的数组，它的长度和原数组相同，但是每个元素的值都是经过回调函数处理后的结果。如果我们需要遍历数组并对每个元素进行一些操作，并且需要返回一个新的数组，那么可以使用map方法。

如果我们只需要遍历数组并对每个元素进行一些操作，而不需要返回一个新的数组，那么可以使用forEach方法。下面是一个使用forEach方法的例子，它将数组中的每个元素转换成字符串并输出：

const arr = [1, 2, 3];
arr.forEach((item, index, array) => {
  console.log(item.toString());
});

如果我们需要遍历数组并对每个元素进行一些操作，并且需要返回一个新的数组，那么可以使用map方法。下面是一个使用map方法的例子，它将数组中的每个元素乘以2并返回一个新的数组：

const arr = [1, 2, 3];
const newArr = arr.map((item, index, array) => {
  return item * 2;
});
console.log(newArr);

通过对forEach和map方法的比较和使用指南，我们可以得出以下结论：

希望本文对你理解和使用ES6中的forEach和map方法有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/675e72bb11e11b9772a4cf10