js中 .map()和.filter()以及他们的区别

js中 .map()和.filter()以及他们的区别

今天看到朋友写的一个数组对比，用的filter()，于是就想想起map()，都是对内部的元素一个一个去遍历，然后输出，到底有什么区别的。 
先说下，jquery也有这两个方法，不过大家都懂得，他们都是对JavaScript进行的封装，我这里只说下JavaScript的。

我们说的map()和filter()其实是： 
Array.prototype.map() 
创建一个新的数组，其结果是该数组中每个元素都调用一个提供的函数后返回的结果。 
语法： 
var newArray = arr.map(function callback(currentValue, index, array){ 
//对每个元素的处理 
}) 
参数 
callback:用来生成新数组用的函数。 
callback的参数： 
currentValue：当然正在处理的元素 
index:正在处理元素的索引 
array:调用map方法的数组（就是.map()前面的也就是arr）

var a = [1,2,3,4];
var newa = a.map(function(x){
 return x = x+1;
});
console.log(newa,a); 
//newa : 2 3 4 5   //a: 1 2 3 4

• 1
• 2
• 3
• 4
• 5
• 6

Array.prototype.filter() 
创建一个新数组，其结果是调用一个函数后过滤得的元素。 
语法 
var newArray = arr.filter(function callback(curValue, index , array){ 
//函数代码 
}); 
参数 
callback: 调用的过滤函数 
curValue： 当前元素 
index： 当前元素的索引 
array：调用filter的数组

var a = [1,2,3,4];
var newa = a.filter(function(x){
 return x > 1;
});
console.log(newa,a); 
//newa : 2 3 4    //a: 1 2 3 4

• 1
• 2
• 3
• 4
• 5
• 6

基本用法就是以上那些 
因为都是对元素的遍历，所以我猜想 如果把map中调用的函数换成filter里面的过滤函数是否能得到相同的结果呢。 
于是

var a = [1,2,3,4];
var newa = a.map(function(x){
 return x > 1;
});
console.log(newa,a); 
//newa :false true true true     //a: 1 2 3 4

• 1
• 2
• 3
• 4
• 5
• 6

可以看出来newa 的到的并不是数字，它们只是对当前元素调用函数后（x是否大于1）的结果。而filter 会将结果为true的数组存到新的数组里面。

另外还有两个常用的遍历函数 
Array.prototype.forEach() 
数组的每一个元素执行一次提供的函数。

var a = [1,2,3,4];
var newa = a.forEach(function(x){
 return x > 1;
});
console.log(newa,a);  //undifined  //1 2 3 4 

• 1
• 2
• 3
• 4
• 5

var a = [1,2,3,4];
var newa = a.forEach(function(x){
 console.log(x);
});
console.log(newa,a);  
//1
//2
//3
//4
//undifined  //1 2 3 4 

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

从上面可以看出forEach 只是让数组里面的元素执行一次函数，并不会对原数组产生影响，也不会获得新的数组 
Array.prototype.reduce() 
接受一个函数作为累加器，依次加上数组的当前元素。 
语法 
arr.reduce(callback(previousValue, currentValue, currentIndex,array),initialValue); 
参数 
callback:累加器函数 
previousValue: 上一次调用函数后的返回值，或者是提供的初始值（initialValue） 
currentValue:当前数组的元素 
currentIndex:当前数组元素的索引 
array:调用reduce的数组 
initialValue:初始值，作为第一次调用callback的第一个参数，也可不写，默认为0；

var a = [1,2,3,4];
var new = a.reduce(function(total, current){
 return total + current;
},100);
console.log(new,a);
//10   //1 2 3 4

• 1
• 2
• 3
• 4
• 5
• 6

其实上面介绍的全是遍历函数，但都有细微的差别，每个都各司其职（好像有点废话），所以当想改变数组的时候用map,想对数组进行过滤用filter，累加数组用reduce。 
不过看了上面的概念和栗子，我想你能更准确的使用它们，那么没问题了，哈哈。

如有错误请指出，前端小白在学习。

https://blog.csdn.net/liuzm0515/article/details/80418801