【Javascript】JS遍历数组的三种方法：map、forEach、filter

前言

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

 

******************************************************************************************

                                           <1>、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);

　

 

********************************************************************************************

                                           <2>、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);
})

　　

 

********************************************************************************************

                                          <3>、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;
　　})
}

 

 

参考博客：

http://www.javashuo.com/article/p-hjrfcprx-cq.html

http://www.javashuo.com/article/p-svkuujsv-en.html

https://blog.csdn.net/weixin_38098192/article/details/80743719

http://www.javashuo.com/article/p-nlarutup-bo.html