jQuery 的陣列操作：$.map() 與 $.grep()
13 Mar 2016這陣子在整理系統內的程式碼，發現自己曾經使用一些過時的方法（例如：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"]
結果
得到一個新的陣列，只包含人名這個欄位。
產生一個新的陣列，但只包含合乎條件的項目
取得女性項目。
使用 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);
結果
得到一個新的陣列，但只包含合乎條件的項目。
「學而時習之，不亦說乎？」常常翻新程式碼，檢視是否能優化，是讓自己更進步的好方法 :)
參考資料
這篇文章的原始位置在這裡-jQuery 的陣列操作：$.map() 與 $.grep()
由於部落格搬遷至此，因此在這裡放了一份，以便閱讀；部份文章片段也做了些許修改，以期提供更好的內容。
