前端基础

20 04月

浅谈Javascript中的forEach和map之间的区别

2021-04-20 前端基础

在Javascript中数组的迭代最常用的两个函数：forEach和map。可能很多人认为这两个函数在工作方式上是相同的，它们都进行迭代并输出数组的每一项。本文就来介绍一下forEach和map的差异，并因此加深对两个函数的理解。

浅谈Javascript中的forEach和map之间的区别

forEach

forEach方法是一个高阶函数，因为它接受回调作为它的参数。它用于遍历数组元素，并且返回undefined。回调函数接受三个参数（元素、值和索引）。

来看下面的代码示例：

const arrAges = [10, 20, 30, 40];
// ES5:
const es5Result = arrAges.forEach(function (item) {
    return item * 2;
});
console.log(es5Result); // undefined
console.log(arrAges); // [ 10, 20, 30, 40 ]

// ES6:
const es6Result = arrAges.forEach((item) => item * 2);
console.log(es6Result); // undefined
console.log(arrAges); // [ 10, 20, 30, 40 ]

从执行的结果来看，上面的forEach函数执行的结果打印出来的都是undefined，执行完后并没有对数组 arrAges 进行任何改动。

forEach函数不接受将其他方法附加到它。 看下面的示例：

const es6Result = arrAges.forEach((item) => item * 2).reduce((a, b) => a + b);
// 异常，Cannot read property 'reduce' of undefined
console.log(es6Result);

map

map函数用于遍历数组元素。它接受一个回调函数作为参数，根据回调函数返回一个新数组和新元素。

回调函数接受三个参数（元素、值和索引）。

来看下面的代码示例：

const arrAges = [10, 20, 30, 40];
// ES5:
const es5Result = arrAges.map(function (item) {
    return item * 2;
});
console.log(es5Result); // [ 20, 40, 60, 80 ]

// ES6:
const es6Result = arrAges.map((item) => item * 2);
console.log(es6Result); // [ 20, 40, 60, 80 ]

从执行结果来看，在数组上使用map函数返回一个数值翻倍的值作为元素的新数组。从上面的执行结果可以看出，map函数执行的结果还能附加其他方法。

如下代码：

const arrAges = [10, 20, 30, 40];
// ES6:
const es6Result = arrAges.map((item) => item * 2).reduce((a, b) => a + b);
console.log(es6Result); // 200

上面的示例，对map函数执行后的结果的数组进行reduce函数将所有元素值相加得到一个结果。关于map和reduce的妙用，可以参见《悟透前端：javascript数组之includes、reduce》

区别

从上面的示例，也看出一点不一样。

forEach

  • 遍历完后返回 undefined。
  • 它不接受附加其他方法。

map

  • 遍历后返回一个新数组
  • 它接受附加其他函数

结论

如上所见，这些是forEach和map之间的差异。就我而言，我更喜欢使用map方法，因为它返回一个新的不同数组。当然，如果不需要返回的数组，则使用forEach更好。

javascript