forEach 和 map 的 区别 (都是处理数组的高阶函数有相同的三个值)

T1

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 进行任何改动。

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

结论

forEach

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

map

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