JS的forEach和map方法的區別

一、前言

　　forEach()和map()兩個方法都是ECMA5中Array引進的新方法，主要作用是對數組的每個元素執行一次提供的函數，但是它們之間還是有區別的。jQuery也有一個方法$.each(),長得和forEach()有點像，功能也類似。但是從本質上還是有很大的區別的，那么我們探探究竟。

二、forEach和map語法

2.1、語法：

//forEach
array.forEach(callback(currentValue, index, array){
    //do something
}, this)

//或者
array.forEach(callback(currentValue, index, array){
    //do something
})　　

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

//$.each()
$(selector).each(function(index,element))  //注意參數的順序

callback: 為數組中每個元素執行的函數,該函數接收三個參數，

參數一：當前數組中元素；參數二：索引； 參數三：當前數組。

this：可選，執行會掉時候，this的指向。

2.2、區別

　　2.2.1、forEach()返回值是undefined，不可以鏈式調用。

　　2.2.2、map()返回一個新數組，原數組不會改變。

　　2.2.3、沒有辦法終止或者跳出forEach()循環，除非拋出異常，所以想執行一個數組是否滿足什么條件，返回布爾值，可以用一般的for循環實現，或者用Array.every()或者Array.some();

　　2.2.4、$.each()方法規定為每個匹配元素規定運行的函數，可以返回 false 可用於及早停止循環。

三、一些栗子

3.1 在使用forEach()時候，如果數組在迭代的視乎被修改，則其他元素會被跳過。因為 forEach()不會在迭代之前創建數組的副本。

3.2反轉字符串

var str = '12345';
Array.prototype.map.call(str, function(x) {   //同時利用了call()方法
  return x;
}).reverse().join(''); 

3.3一個筆試題。

["1", "2", "3"].map(parseInt);  //結果  [1, NaN, NaN]　　　

如果想得到[1, 2,3]應該這么做

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

["1", "2", "3"].map(returnInt);　　

這主要是因為　parseInt()默認有兩個參數，第二個參數是進制數。當parsrInt沒有傳入參數的時候，而map()中的回調函數時候，會給它傳三個參數，第二個參數就是索引，明顯不正確，所以返回NaN了。

3.4....

 

四、兼容性

forEach()和map()是ECMA5新引入的，可能在標准的其他實現中不存在，在使用前可以要Ployfill一下。

具體網上很多吧，更多的是在ie9以下，如果你的項目無視這些，那么你可以不care。