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