JavaScript遍历数组的三种方法map、forEach与filter实例详解

本文实例讲述了JavaScript遍历数组的三种方法map、forEach与filter。分享给大家供大家参考，具体如下：

前言

近一段时间，因为项目原因，会经常在前端对数组进行遍历、处理，JS自带的遍历方法有很多种，往往不加留意，就可能导致知识混乱的现象，并且其中还存在一些坑。前端时间在ediary中总结了js原生自带的常用的对数组遍历处理的方法，分别为：map、forEach、filter，在讲解知识点的同时，会类比相识的函数进行对比，这样会有助于思考方法的利与弊。

一、Js自带的map()方法

1.方法概述

map()方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组

2.格式说明

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

3.使用说明

3.1 支持return返回值；

3.2 return是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份数组中的对应项改变了）

3.3 map只能对元素进行加工处理，产生一个新的数组对象。而不能用它来进行筛选（筛选用filter），为什么不能，看个例子就知道了：

4.例子

4.1 在字符串中使用

在一个String上使用map方法获取字符串中每个字符所对应的ASCII码组成的数组

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.易犯错的点

5.1 很多时候，map给回调函数传的是一个值，但是也有可能传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就是一个函数，它就是作为map的一个回调函数，parseInt接收两个参数，一个是String，一个是进制

上面的函数就可以化为：

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

即

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

6.与map相关

6.1 Map对象

es6提供一个对象Map，看看这个Map建的对象到底是啥东西

它是一个对象，size是它的属性，里面的值封装在[[Entries]]这个数组里面

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