本篇文章說一說與上篇文章《jQuery之美——資料遍歷》中所提到的 $.each() 方法非常相似的方法 $.map()，$.map()也有資料篩選和元素篩選。

先說一下元素篩選：$(select).map(callback(index,domElement))，引數為一回調函式，回撥函式支援2個引數，index(序號)和domElement(元素)。

功能：匹配當前集合中的每個元素,產生一個包含新的jQuery物件

設當前需求：獲取當前已選中的複選框的值：

<!-- html -->
<form action="">
    <input type="checkbox" checked value="web" name="demo">
    <input type="checkbox" checked value="夢之藍" name="demo">
    <input type="checkbox" value="前端開發" name="demo">
</form>
<!-- js -->
var arr1=$("form>input[name='demo']").map(function () {
    if($(this).is(":checked")){
        return $(this).val();
    }
});
console.log(arr1);  //['web','夢之藍']
 

資料篩選：$.map(object,callback(item,index)，引數為一回調函式，回撥函式支援2個引數，item(項)和index(序)。

功能：將一個數組中的所有元素轉換到另一個數組中

設當前需求：找出當前資料中所有性別為“男”的使用者姓名

<!-- js -->
var userList=[
    {"name":"張三",sex:'男'},
    {"name":"李四",sex:'男'},
    {"name":"王五",sex:'女'},
    {"name":"趙六",sex:'男'}
];
var arr2=$.map(userList,function (item,index) {
    if(item.sex=='男'){
        return item.name;
    }
});
console.log(arr2);  //['張三','李四','趙六']
 

為什麼這次這兩個方法一起講呢，因為相對 $.each() 來說，$.map() 的使用頻率相對要少些。本人是非常喜歡這個方法的，用起來非常方便。

下篇預告：jQuery之美——表單物件屬性

更多精彩文章，敬請持續關注——WEB前端夢之藍

用微信掃描下方的二維碼可直接關注該公眾號哦，或者開啟微信公眾號搜尋 “web-7258”，關注後會在第一時間將最新文章推送給您哦