1.相似
语法上来看两者相似,都能接受一个回调函数,并作用于调用者。
var arr = [1,2,3,4,5,6];
var mapArr = arr.map(item=>item+=1);
var filterArr = arr.filter(item=>item+=1);
console.log(mapArr);
console.log(filterArr);
2.区别
不同点在于:当回调函数为【布尔函数】时
map()函数会将回调函数作用于“调用者”的每一个元素,一一执行后将返回的结果构成数组作为最终结果返回。
filter()函数会将回调函数作用域"调用者"的每一个元素,一一执行后将返回结果为真的结果构成数组作为最终结果返回。
var arr = [1,2,3,4,5,6];
var mapArr = arr.map(item=>item>5);
var filterArr = arr.filter(item=>item>5);
console.log(mapArr);
console.log(filterArr);
3.实例区别
对JSON数据中大于10000的参数进行文字处理,例如100041转换成"10w+"。
(1)使用filter函数操作
var data = [
{ "title": "标题1", "time": "2020-09-21", "read": 30, "favor": [1, 3, 6]},
{ "title": "标题1", "time": "2020-09-21", "read": 10054, "favor": [5, 3, 7]},
{ "title": "标题1", "time": "2020-09-22", "read": 200, "favor": [1, 8, 5 ,3, 6]},
{ "title": "标题1", "time": "2020-09-22", "read": 2000100, "favor": [10, 5]},
{ "title": "标题1", "time": "2020-09-23", "read": 74, "favor": [1, 2]},
];
/* 注意:此时使用的时filter函数 */
var newData = data.filter(
function (item){
var temp = simpleCopy(item);
if(temp.read/10000>1){
temp.read = Math.floor(temp.read/10000) + "w+";
}
return temp;
});
function simpleCopy(obj){
var tmpObj = {};
for (let key in obj) {
tmpObj[key] = obj[key];
}
return tmpObj;
}
console.log(data);
console.log(newData);
很明显数据没有发生任何变化,回调函数在不是布尔函数的情况下也没能得到
“每一个数组元素分别执行回调函数,并返回执行结果”
的目的。
(2)使用map函数操作
...
/* 注意:此时使用的时map函数 */
var newData = data.map(
...
结果显而易见,达成目的。
4.总结
个人认为两者的区别可以简单总节为一句话:
filter返回的内容要么是调用数组本身,要么是调用数组的子集;而map返回的内容则有可能是执行的结果。