快捷導(dǎo)航

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

更新時間：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()兩個方法都是ECMA5中Array引進(jìn)的新方法，主要作用是對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)，但是它們之間還是有區(qū)別的。jQuery也有一個方法$.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ù)組中每個元素執(zhí)行的函數(shù),該函數(shù)接收三個參數(shù)，

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

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

2.2、區(qū)別

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

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

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

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

三、一些栗子

3.1 迭代時的修改

在使用forEach()時候，如果數(shù)組在迭代的時候被修改，則其他元素會被跳過。因?yàn)?forEach()不會在迭代之前創(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) {  //同時利用了call()方法
 return x;
}).reverse().join('');

3.3一個筆試題。

["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)有兩個參數(shù)，第二個參數(shù)是進(jìn)制數(shù)。當(dāng)parsrInt沒有傳入?yún)?shù)的時候，而map()中的回調(diào)函數(shù)時候，會給它傳三個參數(shù)，第二個參數(shù)就是索引，明顯不正確，所以返回NaN了。