jQuery 筛选 map()

亦凉 2022-05-14 13:28 172阅读 0赞

本篇文章说一说与上篇文章[《jQuery 数据遍历》][jQuery]中所提到的 **$.each()** 方法非常相似的方法 **$.map()**，$.map()也有数据筛选和元素筛选。

先说一下元素筛选：**$(select).map(callback(index,domElement))**，参数为一回调函数，回调函数支持2个参数，index(序号)和domElement(元素)。

功能：匹配当前集合中的每个元素,产生一个包含新的jQuery对象

设当前需求：获取当前已选中的复选框的值：

<form action="">
        <input type="checkbox" checked value="web" name="demo">
        <input type="checkbox" checked value="梦之蓝" name="demo">
        <input type="checkbox" value="前端开发" name="demo">
    </form>
    
    
    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(序)。

功能：将一个数组中的所有元素转换到另一个数组中

设当前需求：找出当前数据中所有性别为“男”的用户姓名

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()** 的使用频率相对要少些。本人是非常喜欢这个方法的，用起来非常方便。

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[jQuery]: https://blog.csdn.net/u013350495/article/details/82533527
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/9c530b1344f44c9c99b22d8307228826.png