jQuery.map() 函数详解

最新推荐文章于 2023-06-03 09:15:20 发布

chunchun1230

最新推荐文章于 2023-06-03 09:15:20 发布

阅读量1.5k

点赞数

分类专栏： jQuery点滴

原文链接：https://codeplayer.vip/p/j7stu

版权

jQuery点滴专栏收录该内容

22 篇文章 0 订阅

订阅专栏

jQuery.map()函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。

jQuery库中还有一个同名的实例方法map()，它仅用于对当前jQuery对象所匹配的元素进行遍历处理。

该函数属于全局jQuery对象。

语法

JavaScript:

jQuery.map( object, callback )

参数

参数	描述
object	Array/Object类型指定的需要处理的数组或对象。
callback	Function类型指定的处理函数。

在jQuery 1.6 之前，该函数只支持遍历数组；从 1.6 开始，该函数也支持遍历对象。

jQuery.map()函数将遍历数组的元素(或对象的属性)并分别执行函数callback，函数中的this将指向全局对象(window)。jQuery.map()还会为函数传入两个参数：其一是当前迭代的元素或属性值，其二是当前迭代项的数组索引或对象属性名。

每次执行callback函数的返回值将作为结果数组中的一个元素，如果函数的返回值为null或undefined，则不会被添加到结果数组中。

返回值

jQuery.map()函数的返回值为Array类型，返回经过处理后结果数组。

遍历数组：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jq源码分析</title>
    <script src="jquery-2.0.3.js"></script>
</head>

<body>
    <script>
        //遍历数组
        var arr = [ "CodePlayer", 15, true ];
         var result = $.map(arr,function(value,index){
            if(typeof value == "string"){
               return null;
            }else{
                return value;
            }
         });
         console.log(result);
    </script>
</body>

</html>

结果：

遍历对象：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jq源码分析</title>
    <script src="jquery-2.0.3.js"></script>
</head>

<body>
    <script>
         //遍历对象
         var obj = {name:'hello',age:19};
         var result2 = $.map(obj,function(value, key){
            return { "name": key, "value": value };
         });
         console.log(result2);
    </script>
</body>

</html>

结果：

遍历jQuery对象匹配的元素:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>jq源码分析</title>
    <script src="jquery-2.0.3.js"></script>
</head>

<body>
    <input id="n1" name="uid" type="checkbox" checked value="1" />
    <input id="n2" name="uid" type="checkbox" checked value="2" />
    <input id="n3" name="uid" type="checkbox" value="3" />
    <input id="n4" name="uid" type="checkbox" checked value="4" />
    <script>
         // 遍历jQuery对象匹配的元素
         var result3 = $.map( $("[name=uid]:checked"), function(dom, key){
            return dom.value;		
        });
        console.log(result3);
    </script>
</body>

</html>

结果：

chunchun1230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery.map() 函数详解

jQuery.map()函数用于使用指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回。jQuery库中还有一个同名的实例方法map()，它仅用于对当前jQuery对象所匹配的元素进行遍历处理。该函数属于全局jQuery对象。语法JavaScript:jQuery.map( object, callback )参数参数描述...
复制链接

扫一扫

专栏目录