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

創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元新巴爾虎右做網(wǎng)站,已為上家服務(wù),為新巴爾虎右各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

一、前言

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

二、forEach和map語(yǔ)法

2.1、語(yǔ)法：

//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、沒(méi)有辦法終止或者跳出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ì)被跳過(guò)。因?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沒(méi)有傳入?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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

本文題目：forEach與map方法在JavaScript中的區(qū)別是什么
網(wǎng)站鏈接：http://www.rwnh.cn/article44/pgcphe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、ChatGPT、建站公司、網(wǎng)站營(yíng)銷、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)