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>
结果: