jQuery之美——筛选之map()

本篇文章说一说与上篇文章《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前端梦之蓝

扫描二维码关注公众号，回复： 3093328 查看本文章

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦

jQuery之美——筛选之map()

猜你喜欢