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。
不过看了上面的概念和栗子,我想你能更准确的使用它们,那么没问题了,哈哈。
如有错误请指出,前端小白在学习。