本文實例講述了JavaScript遍歷數(shù)組的三種方法map、forEach與filter。分享給大家供大家參考，具體如下：

前言

近一段時間，因為項目原因，會經(jīng)常在前端對數(shù)組進(jìn)行遍歷、處理，JS自帶的遍歷方法有很多種，往往不加留意，就可能導(dǎo)致知識混亂的現(xiàn)象，并且其中還存在一些坑。前端時間在ediary中總結(jié)了js原生自帶的常用的對數(shù)組遍歷處理的方法，分別為：map、forEach、filter，在講解知識點(diǎn)的同時，會類比相識的函數(shù)進(jìn)行對比，這樣會有助于思考方法的利與弊。

一、Js自帶的map()方法

1.方法概述

map()方法返回一個由原數(shù)組中的每個元素調(diào)用一個指定方法后的返回值組成的新數(shù)組

2.格式說明

var newArray = ["1","2","3"].map(fucntion(e,i,arr){return parseInt(e,10)})

3.使用說明

3.1 支持return返回值；

3.2 return是啥，相當(dāng)于把數(shù)組中的這一項變?yōu)樯叮ú⒉挥绊懺瓉淼臄?shù)組，只是相當(dāng)于把原數(shù)組克隆一份，把克隆的這一份數(shù)組中的對應(yīng)項改變了）

3.3 map只能對元素進(jìn)行加工處理，產(chǎn)生一個新的數(shù)組對象。而不能用它來進(jìn)行篩選（篩選用filter），為什么不能，看個例子就知道了：

4.例子

4.1 在字符串中使用

在一個String上使用map方法獲取字符串中每個字符所對應(yīng)的ASCII碼組成的數(shù)組

var map = Array.prototype.mapvar a = map.call("Hello World", function(e){return e.charCodeAt(0);})// a的值為[72,101,108,108,111,32,87,111,114,108,100]

5.易犯錯的點(diǎn)

5.1 很多時候，map給回調(diào)函數(shù)傳的是一個值，但是也有可能傳2個、3個值，例如下面的例子

var map = Array.prototype.mapvar a = map.call("Hello World", function(e){return e.charCodeAt(0);})// a的值為[72,101,108,108,111,32,87,111,114,108,100]

為什么會這樣，因為parseInt就是一個函數(shù)，它就是作為map的一個回調(diào)函數(shù)，parseInt接收兩個參數(shù)，一個是String，一個是進(jìn)制

上面的函數(shù)就可以化為：

["1","2","3"].map(parseInt(string, radix));

即

["1","2","3"].map(function(string, radix){return parseInt(string, radix)})// 所以才返回結(jié)果為：[1, NaN, NaN]

6.與map相關(guān)

6.1 Map對象

es6提供一個對象Map，看看這個Map建的對象到底是啥東西

它是一個對象，size是它的屬性，里面的值封裝在[[Entries]]這個數(shù)組里面

myMap.set(1, "a"); // 相當(dāng)于java的map.put();myMap.set(2, "b");myMap.set(3, "c");myMap.size();myMap.get(1);myMap.get(2);myMap.get(3);