寫這篇的動機是常在專案看到「古典式」JavaScript陣列處理，例如：跑迴圈將物件陣列的某個字串屬取出轉成字串陣列、篩選物件陣列取得特定類別的集合。用for迴圈處理沒什麼不對，但既然專案已經用了jQuery，能一行搞定卻寫成三五行不免可惜（程式又不按行數計酬，寫愈多手愈酸咩 XD）。感覺上還有些朋友不認識$.map()跟$.grep()這兩個好東西，故寫篇文章推薦一下。
若用LINQ做比方，＄.map()相當於 .Select(o => 傳回數值或其他型別物件).ToArray()，可將物件陣列轉換成某個屬性或其他型別物件組成的陣列；$.grep()則類似 .Where(o => 傳回布林值).ToArray()，可過濾陣列保留符合條件的元素項目。
使用概念如下，輸入陣列，執行後傳回陣列：
$.map(array, function(element, index) { return 新陣列的元素; });
（註：若輸出陣列想略過特定元素，就return null或undefined）
$.grep(array, function(element, index) { return true或false; });
（傳回true的元素才會出現在篩選結果）
來看實例，以下程式有四個範例，分別用傳統方法及$.map(), $.grep()實現「物件陣列轉字串陣列」以及「過濾物件陣列保留特定類別」，程式不複雜，直接看程式碼，開始想想可以用在哪些專案角萿吧！
線上展示
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>jQuery map & grep</title>
</head>
<body>
<scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function Product(category, name) {this.category = category;this.name = name;}
var items = [new Product("Phone", "iPhone4S"),
new Product("Phone", "Lumia 920"),
new Product("Phone", "小米"),
new Product("Pad", "Nexus7"),
new Product("Pad", "iPad")
];
//範例一：取得產品名稱字串陣列var names = [];for (var i = 0; i < items.length; i++) {
names.push(items[i].name);
}
//同場加映：JSON.stringify時傳入額外參數加上縮排 alert(JSON.stringify(names, null, 4));//範例二：篩選手機類的產品陣列var phones = []; $.each(items, function(i, item) {if (item.category == "Phone")
phones.push(item);
});
alert(JSON.stringify(phones, null, 4));//jQuery改良版//範例三：取得產品名稱字串陣列$.map()var name = $.map(items, function(item) {
return item.name; });
alert(JSON.stringify(names, null, 4));//範例四：篩選手機類的產品陣列$.grep()var phones = $.grep(items, function(item) {
return item.category == "Phone";
});
alert(JSON.stringify(phones, null, 4));</script>
</body>
</html>