在JS中的map()、filter()、forEach()、reduce()函数都是对数组内部的元素进行遍历,但是他们之间有什么区别呢?
一、Array.prototype.map()
1、说明
将数组的所有成员依次传入参数函数,然后把每一次的执行结果组成一个新数组返回。
2、语法
var newArray = arr.map(function callback(currentValue, index, array){
//对每个元素的处理
})
// 参数
// currentValue:当前正在处理的元素
// index:正在处理元素的索引
// array:调用map方法的数组(就是.map()前面的,也就是arr)
复制代码
3、示例
var arr = [1,2,3,4];
var newArr = arr.map(function(x){
return x = x+1;
});
console.log(newArr , arr);
//newArr:2,3,4,5
//arr:1,2,3,4
复制代码
遍历数组中的每一个元素,然后对每一个元素执行函数中的处理,最后将返回值组成一个新的数组返回,原数组(arr)保持不变。
二、Array.prototype.forEach()
1、说明
对数组的所有成员依次执行参数函数。但是,forEach方法不返回值,只用来操作数据。
2、语法
var newArray = arr.forEach(function callback(currentValue, index , array){
//函数代码
});
// 参数
// currentValue: 当前元素
// index: 当前元素的索引
// array:调用forEach的数组
复制代码
3、示例
var arr = [1,2,3,4];
var newArr = arr.forEach(function(x){
return x = x+1;
});
console.log(newArr , arr);
//newArr:undefined
//arr:1,2,3,4
复制代码
遍历数组中的每一个元素,然后对每一个元素执行函数中的处理,没有返回值,即使设置了return也无效,原数组(arr)保持不变。
三、Array.prototype.fliter()
1、说明
过滤数组成员,满足条件的成员组成一个新数组返回。
2、语法
var newArray = arr.filter(function callback(currentValue, index , array){
//函数代码
});
// 参数
// currentValue: 当前元素
// index: 当前元素的索引
// array:调用filter的数组
复制代码
3、示例
var arr = [1,2,3,4];
var newArr = arr.filter(function(x){
return x > 1;
});
console.log(newArr , arr);
// newArr:2,3,4
// arr:1,2,3,4
复制代码
遍历数组中的每一个元素,然后对每一个元素执行函数中的处理,最后判断返回值是否为true,将返回为true的数组元素(该元素为最原始的数组元素)组成一个新的数组返回,原数组(arr)保持不变。
四、Array.prototype.some()与Array.prototype.every()
1、说明
对数组的所有成员依次执行参数函数,返回一个布尔值。
some()是只要一个成员的返回值是true,则整个some()的返回值就是true,否则返回false。
every()是所有成员的返回值都是true,整个every()才返回true,否则返回false。
2、语法
var newArray = arr.some(function callback(currentValue, index , array){
//函数代码
});
// 参数
// currentValue: 当前元素
// index: 当前元素的索引
// array:调用filter的数组
var newArray = arr.every(function callback(currentValue, index , array){
//函数代码
});
// 参数
// currentValue: 当前元素
// index: 当前元素的索引
// array:调用filter的数组
复制代码
3、示例
// 以some()为例:
var arr = [1,2,3,4];
var newArr = arr.some(function(x){
return x > 1;
});
console.log(newArr , arr);
// newArr:true
// arr:1,2,3,4
复制代码
遍历数组中的每一个元素,然后对每一个元素执行函数中的处理,最后判断返回值是否为true,
如果有一个成员返回值为true,则some()返回true,
如果所有成员返回值都为true,则every()返回true,
原数组(arr)保持不变。
五、Array.prototype.reduce()
1、说明
使用函数依次处理数组的每个成员,最终累计为一个值。
2、语法
//语法
var newArray = arr.reduce(callback(previousValue, currentValue, currentIndex,array){
//函数代码
},initialValue);
//参数
// previousValue: 上一次调用函数后的返回值,或者是提供的初始值(initialValue)
// currentValue:当前数组的元素
// currentIndex:当前数组元素的索引
// array:调用reduce的数组
// initialValue:初始值,作为第一次调用callback的第一个参数,也可不写,默认为0;
复制代码
3、示例
var arr = [1,2,3,4];
var newArr = arr.reduce(function(total, current){
return total + current;
},100);
console.log(newArr,arr);
// newArr:110
// arr:1,2,3,4
复制代码
遍历数组中的每一个元素,然后对每一个元素执行函数中的处理,返回值会被记住,并且在遍历下一个元素中可以被调用,最后返回单个结果值,原数组(arr)保持不变。
六、区别总结
以上介绍的这些方法都是依次使用函数处理数组中的每一个成员,但是都有细微的差别,下面将整理各个函数中的差别。
map(): 在处理函数中将返回值组成一个新的数组返回,原数组(arr)保持不变。
forEach(): 没有返回值,即使处理函数中设置了return也无效,原数组(arr)保持不变。
filter(): 判断处理函数中的返回值是否为true,将返回为true的数组元素(该元素为最原始的数组元素)组成一个新的数组返回,原数组(arr)保持不变。
some()与every(): 判断处理函数中的返回值是否为true,如果有一个成员返回值为true,则some()返回true;如果所有成员返回值都为true,则every()返回true,原数组(arr)保持不变。
reduce(): 返回值会被记住,并且在遍历下一个元素中可以被调用,最后返回单个结果值,原数组(arr)保持不变。