JS的forEach和map方法的區別

1、前言

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

2、forEach和map語法

2.一、語法：

//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.一、forEach()返回值是undefined，不能夠鏈式調用。

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

　　2.2.三、沒有辦法終止或者跳出forEach()循環，除非拋出異常，因此想執行一個數組是否知足什麼條件，返回布爾值，能夠用通常的for循環實現，或者用Array.every()或者Array.some();

　　2.2.四、$.each()方法規定爲每一個匹配元素規定運行的函數，能夠返回 false 可用於及早中止循環。

3、一些栗子

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....

 

4、兼容性

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

具體網上不少吧，更多的是在ie9如下，若是你的項目無視這些，那麼你能夠不care。