jQuery.map() 函数详解

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函数的返回值将作为结果数组中的一个元素,如果函数的返回值为nullundefined,则不会被添加到结果数组中。 

返回值

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>

 结果:

发布了139 篇原创文章 · 获赞 27 · 访问量 24万+

猜你喜欢

转载自blog.csdn.net/chunchun1230/article/details/104177316