Javascript中的map()函数与filter()函数的区别

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返回的内容则有可能是执行的结果。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值