快捷導(dǎo)航

JS forEach和map方法的用法與區(qū)別分析

更新時(shí)間：2019年02月27日 11:17:47 作者：leaf+

這篇文章主要介紹了JS forEach和map方法的用法與區(qū)別,結(jié)合實(shí)例形式分析了forEach和map方法的功能、原理、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下

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

一、前言

forEach()和map()兩個(gè)方法都是ECMA5中Array引進(jìn)的新方法，主要作用是對數(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了。