本文實例講述了JS forEach和map方法的用法與區別。分享給大家供大家參考，具體如下：

一、前言

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

二、forEach和map語法

2.1、語法：

//forEacharray.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一下。

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

參考：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。

PS：這里再為大家推薦一款JS數組遍歷方式分析對比工具供大家參考：

在線JS常見遍歷方式性能分析比較工具：http://tools.VeVB.COm/aideddesign/js_bianli

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數組操作技巧總結》、《JavaScript遍歷算法與技巧總結》、《javascript面向對象入門教程》、《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript錯誤與調試技巧總結》

希望本文所述對大家JavaScript程序設計有所幫助。