forEach map的区别

本文章有自己的见解以及参考MDN 上的资料，详细链接有：
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

forEach map

1.1 forEach 和 map 的语法

1.1.1 forEach 有两种形式

array.forEach = function(callback(ele, index, array){}, this);
或者
array.forEach = function(callback(ele, index, array){});  
上述两个的区别就是有没有绑定this 到对象

callback: 为数组中每个元素执行的函数,该函数接收三个参数，
参数一：当前数组中元素；参数二：索引； 参数三：当前数组。

1.1.2 map的写法

var new_array = arr.map(callback[, thisArg])

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
       //   Return element for new_array  }[, 
thisArg]);

2 异同点

2.1 相同之处

• forEach map操作的只能数组
• 都接收一个回调函数作为参数，回调函数里面有三个参数，第一个参数是数组的元素，第二个是索引，第三个是 当前数组
• 都是循环遍历数组每一项
• 匿名函数中的this指向的都是window
• 执行的速度都没有 for 循环快，因为接受一个回调函数，所以在性能方面比不上 for循环

2.2 不同点

• forEach(）返回值是undefined ，不可以链式调用,理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原来的数组；
• map返回的是一个新数组，不会改变原有的数组
• map方法有返回值，支持链式调用；
• 没有办法终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();

3.举个栗子

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的结果

// 也可以使用简单的箭头函数，结果同上
['1', '2', '3'].map( str => parseInt(str) );

// 一个更简单的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 与`parseInt` 不同，下面的结果会返回浮点数或指数:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]