forEach與map方法在JavaScript中的區別是什么

forEach與map方法在JavaScript中的區別是什么？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

一、前言

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()不會在迭代之前創建數組的副本。

var words = ['one', 'two', 'three', 'four'];
words.forEach(function(word) {
 console.log(word);
 if (word === 'two') {
  words.shift();
 }
});
// one
// two
// four

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了。

四、兼容性

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。