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

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)})

map中回调函数中的第⼀个参数为：当前正在遍历的元素

map中回调函数中的第⼆个参数为：当前元素索引

map中回调函数中的第三个参数为：原数组本⾝

3.使⽤说明

3.1 ⽀持return返回值；

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

组中的对应项改变了）

3.3 map只能对元素进⾏加⼯处理，产⽣⼀个新的数组对象。⽽不能⽤它来进⾏筛选（筛选⽤filter），为什么不能，看个例⼦

就知道了：

4.例⼦

4.1 在字符串中使⽤

在⼀个String上使⽤map⽅法获取字符串中每个字符所对应的ASCII码组成的数组

var map = Array.prototype.map

var 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.map

var 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);

⼆、Js⾃带的forEach()⽅法

1.⽅法概述

forEach()⽅法返回⼀个由原数组中的每个元素调⽤⼀个指定⽅法后的返回值组成的新数组

2.格式说明

forEach⽅法中的function回调有三个参数，第⼀个参数为：当前正在遍历的元素第⼆个参数为：当前元素索引

第三个参数为：原数组本⾝

[].forEach(function(value, index, array))

3.使⽤说明

3.1 这个⽅法没有返回值，仅仅是遍历数组中的每⼀项，不对原来数组进⾏修改

但是可以⾃⼰通过数组索引来修改原来的数组

3.2 forEach()不能遍历对象，可以使⽤for in

4.缺点

4.1 您不能使⽤break语句中断循环，也不能使⽤return语句返回到外层函数

4.2 ES5推出的，实际性能⽐for还弱

5.例⼦

5.1 通过数组索引改变原数组

var obj = [1,2,3,4,5,6]

var res = obj.forEach(function(item, index, arr) {

arr[index] = item * 10;

})

console.log(res); // --> undefined

console.log(obj); // --> [10,20,30,40,50,60]

5.2 如果数组在迭代的时候被修改，则当前元素与前⾯的元素会跳过。因为forEach()不会在迭代之前创建数组的副本

var words = ['1', '2', '3', '4'];

words.forEach(function(word) {

console.log(word);

if (word === '2') { words.shift();

}

});

// 1

// 2

// 4

6. 与forEach相关

6.1 $.each 与 for in

可遍历数组，可遍历对象

6.1.1遍历数组

var arr = [1，2，3，4，5]

var res = $.each(arr, function(index, value){

console.log(index, value);

})

console.log(res); // 返回值，被遍历的函数

6.1.2遍历对象

var obj = {name: "psg", age: 22, gender: "male"};

// for in 遍历

for(var key in obj) {

console.log(key, obj[key]);

}

// $.each 遍历

$.each(obj, function(key, value) {

console.log(key, value);

})

三、Js⾃带的filter()⽅法

1.⽅法概述

filter()⽅法是对原数组进⾏过滤筛选，产⽣⼀个新的数组对象

2.注意事项

2.1 filter()不会对空数组进⾏检测（如果对空数组进⾏筛选，返回值位undefined）

2.2 filter()不会改变原始数组

2.3 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组

3.格式说明

forEach⽅法中的function回调有三个参数，第⼀个参数为：当前正在遍历的元素第⼆个参数为：当前元素索引

第三个参数为：原数组本⾝

[].filter(function(value, index, array)， thisValue)

4.例⼦

4.1 在⼀个Array中，删除偶数，只保留奇数

var arr = [1, 2, 3, 4, 5, 6, 9, 10, 15];

var r = arr.filter(function(x) {

return x % 2 !== 0;

});

r; // [1，3，5，9，15]4.2 把⼀个Array中的空字符串删掉

var arr = ['A', '', 'B', null, undefined, 'C', ' '];

var r = arr.filter(function(e) {

return s && s.trim(); // 注意：IE9⼀下的版本没有trim()⽅法

});

r; // ['A', 'B', 'C']

4.3 巧妙去除Array的重复元素

var r, arr = ['A', 'B', 'C', 'D', 'B', 'A']

r = arr.filter(function(e, i, self) {

return self.indexOf === i;

})

console.log(r); // --> ['A', 'B', 'C', 'D']

4.4 筛选素数

function get_primes(arr) {

var i;

return arr.filter(function (element) {

var flag = true;

if (element < 2) {

flag = false;

} else {

for (var i = 2; i < element; i++) {

if (element % i == 0) {

flag = false;

break;

}

}

}

return flag;

})

}

参考：

PS：这⾥再为⼤家推荐⼀款JS数组遍历⽅式分析对⽐⼯具供⼤家参考：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》

希望本⽂所述对⼤家JavaScript程序设计有所帮助。