map與filter的區別

原生js中數組可以直接通過map(),filter()函數來進行一次操作，他們分別是做一次統一映射，和一次過濾。說的更通俗一點，就是map函數之后，數組元素個數不變，但是按照一定的條件轉換，數組元素發生了變化。filter函數之后，數組元素個數可能發生了改變，但是數組元素不會發生改變。

下面通過示例說明一下這兩個方法的用法。

map(function(item,index){
       return func(item);

});

filter(function(item,index){
      return func(item);

}):

示例中，給定一個數組，var arr = ["abc","aaa","bcd"]，通過map函數，我們將他們轉大寫，然后通過filter函數，將A開頭的留下。

$(function(){        
    var arr = ["abc","aaa","bcd"];
    console.log(arr);
    arr = arr.map(function(item,index){
       console.log(item,index);
       return String.prototype.toUpperCase.call(item);
    });
    console.log(arr);
    arr = arr.filter(function(item,index){
        console.log(item,index);
        return String.prototype.startsWith.call(item,"A");
    });
    console.log(arr);
});

運行結果，如下：

 

 

map,filter函數均有兩個參數item,index 分別是數組元素的值和索引，我們一般對item進行轉換。

另外，jQuery也提供了map,filter方法，用法和原生的map,filter類似，只不過index,item參數位置和原生正好相反。

$(function(){        
    var arr = ["abc","aaa","bcd"];
    arr = $(arr).map(function(index,item){
        console.log(index,item);
        return String.prototype.toUpperCase.call(item);
    }).filter(function(index,item){
        console.log(index,item);
        return String.prototype.startsWith.call(item,"A");
    });
    console.log(arr);
    arr = $.makeArray(arr);
    console.log(arr);
});

運行結果如下：

  

map,filter方法都會對數組所有元素進行一次轉換。