forEach與map方法在JavaScript中的區(qū)別是什么

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

一、前言

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

二、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)) //注意參數(shù)的順序

callback: 為數(shù)組中每個(gè)元素執(zhí)行的函數(shù),該函數(shù)接收三個(gè)參數(shù)，

參數(shù)一：當(dāng)前數(shù)組中元素；參數(shù)二：索引； 參數(shù)三：當(dāng)前數(shù)組。

this：可選，執(zhí)行會(huì)掉時(shí)候，this的指向。

2.2、區(qū)別

2.2.1、forEach()返回值是undefined，不可以鏈?zhǔn)秸{(diào)用。

2.2.2、map()返回一個(gè)新數(shù)組，原數(shù)組不會(huì)改變。

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

2.2.4、$.each()方法規(guī)定為每個(gè)匹配元素規(guī)定運(yùn)行的函數(shù)，可以返回 false 可用于及早停止循環(huán)。

三、一些栗子

3.1 迭代時(shí)的修改

在使用forEach()時(shí)候，如果數(shù)組在迭代的時(shí)候被修改，則其他元素會(huì)被跳過。因?yàn)?forEach()不會(huì)在迭代之前創(chuàng)建數(shù)組的副本。

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

3.2反轉(zhuǎn)字符串

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

3.3一個(gè)筆試題。

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

如果想得到[1, 2,3]應(yīng)該這么做

function returnInt(element){
 return parseInt(element,10);
}
["1", "2", "3"].map(returnInt);

這主要是因?yàn)?code>parseInt()默認(rèn)有兩個(gè)參數(shù)，第二個(gè)參數(shù)是進(jìn)制數(shù)。當(dāng)parsrInt沒有傳入?yún)?shù)的時(shí)候，而map()中的回調(diào)函數(shù)時(shí)候，會(huì)給它傳三個(gè)參數(shù)，第二個(gè)參數(shù)就是索引，明顯不正確，所以返回NaN了。

四、兼容性

forEach()和map()是ECMA5新引入的，可能在標(biāo)準(zhǔn)的其他實(shí)現(xiàn)中不存在，在使用前可以要Ployfill一下。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。