當前位置:成語大全網 - 新華字典 - JS的forEach和map方法的區別,還有壹個$each

JS的forEach和map方法的區別,還有壹個$each

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

壹、forEach和map語法

語法:

//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.1、forEach()返回值是undefined,不可以鏈式調用。

2.2、map()返回壹個新數組,原數組不會改變。

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

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

["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。