jQuery的陣列操作：$.map()與$.grep()

jQuery的陣列操作：$.map()與$.grep()

這陣子在整理系統內的程式碼，發現自己曾經使用一些過時的方法(例如：native javascript操作陣列)，而非使用jQuery提供的API來撰寫。以下整理並比較這兩種方法的差異。

先製造一筆假資料當範例。

function Person(name, sex){
    this.name = name;
    this.sex = sex;
};

var people = [
    new Person('Apple', 'female'),
    new Person('Bob', 'male'),
    new Person('Helen', 'female'),
    new Person('Jacky', 'male'),
    new Person('Oliver', 'male')
];

這種產生物件的方法可參考All-in-one Constructor Pattern。

產生一個新的陣列，但只包含原陣列的特定欄位

產生一個新的陣列(nameList)，只包含人名(name)這個欄位。

使用JavaScript操作

將每個項目的人名(name)丟(push)到新的陣列裡面。

var nameList = [];
$.each(people, function(index, value){
    nameList1.push(value.name);
});

console.log(nameList); //["Apple", "Bob", "Helen", "Jacky", "Oliver"]

使用jQuery操作

使用$.map()將項目的特定欄位丟(return)到新的陣列裡面。

var nameList = $.map(people, function(item, index){
    return item.name;
})
console.log(nameList); //["Apple", "Bob", "Helen", "Jacky", "Oliver"]

結果

得到一個新的陣列，只包含人名這個欄位。

$.map()

產生一個新的陣列，但只包含合乎條件的項目

取得女性項目。

使用JavaScript操作

先比對是否合乎條件(if(value.sex === 'female'))。若合乎條件，則將項目丟(push)到新的陣列裡面。

var femaleList = [];
$.each(people, function(index, value){
    if(value.sex === 'female'){
        femaleList.push(value);
    }
});
console.log(femaleList);

使用jQuery操作

使用$.grep()將符合條件的項目丟(return)到新的陣列裡面。

var femaleList = $.grep(people, function(item, index){
    return item.sex === 'female';
});
console.log(femaleList);

結果

得到一個新的陣列，但只包含合乎條件的項目。

$.grep()

「學而時習之，不亦說乎？」常常翻新程式碼，檢視是否能優化，是讓自己更進步的好方法 :)

參考資料

由於部落格搬家了，因此在新落格也放了一份，未來若有增刪會在這裡更新-jQuery的陣列操作：$.map()與$.grep()。

留言

張貼留言