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

map()、filter()中都提供一个回调函数，回调函数中有三个参数分别是数组元素，元素索引，原数组本身，并且这两个方法在使用的过程中都不会改变原数组。

一、map()语法和示例

（1）、语法：

var newArray = arr.map(function callback(currentValue, index, array){ 
  ...       //对每个元素的处理 
}) 

参数 ：
1、callback:用来生成新数组用的函数。
2、currentValue：当然正在处理的元素
3、index:正在处理元素的索引
4、array:调用map方法的数组（就是.map()前面的也就是arr）

（2）、示例

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

二、filter()语法和示例

filter()方法会返回一个新数组，该新数组的元素是符合回到函数中筛选条件的结果。filter()为数组中的每个元素调用一次 callback 函数，并利用所有使得回调函数返回 true 或等价于 true 的值的元素创建一个新数组；如果没有任何的项符合筛选的条件(false)，那么filter()方法将返回一个空的数组。

（1）、语法：

var newArray = arr.filter(function callback(currentValue, index , array){ 
    ...//函数代码 
}); 

参数 ：
1、callback: 调用的过滤函数
2、curValue： 当前元素
3、index： 当前元素的索引
4、array：调用filter的数组

（2）、示例

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

三、两者互换比较

把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

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

四、与其他遍历函数对比差异

（1）、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 

应用二：

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 

从上面可以看出forEach 只是让数组里面的元素执行一次函数，并不会对原数组产生影响，也不会获得新的数组

（2）、reduce() 接受一个函数作为累加器，依次加上数组的当前元素。

语法

arr.reduce(callback(previousValue, currentValue, currentIndex,array),initialValue); 

参数
1、callback:累加器函数
2、previousValue: 上一次调用函数后的返回值，或者是提供的初始值（initialValue）
3、currentValue:当前数组的元素
4、currentIndex:当前数组元素的索引
5、array:调用reduce的数组
6、initialValue:初始值，作为第一次调用callback的第一个参数，也可不写，默认为0；

示例

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

总结：当想改变数组的时候用map，想对数组进行过滤用filter，累加数组用reduce。

参考文章：https://blog.csdn.net/liuzm0515/article/details/80418801