1.$.each( )函数
使用$.each( )函数可以完成指定数组或对象的遍历,语法格式如下:
$.each(obj,fn(index,value))
注意: $.each是异步操作
其中参数obj,表示要遍历的数组或对象,fn为每个遍历元素执行的回调函数,该函数包含2个参数,index表示数组的下标或对象的属性,value表示数组的元素或对象的属性值。
实现代码
<style type="text/css">
body{font-size:13px}
ul{padding:0px;margin:0px;list-style-type:none;
width:260px;border-top:dashed 1px #ccc;
border-left:dashed 1px #ccc;border-right:dashed 1px #ccc}
ul li{border-bottom:dashed 1px #ccc;padding:8px}
.title{background-color:#eee; font-weight:bold}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<ul></ul>
<script type="text/javascript">
$(function() {
var arrStu = { "张三:": "60", "李四:": "70", "王二:": "80" }
var strContent = "<li class='title'>姓名:分数</li>";
$.each(arrStu, function(Name, Value) {
strContent += "<li>" + Name + Value + "</li>";
})
$("ul").append(strContent);
})
</script>
</body>
页面效果
2.$.grep()函数
$.grep() 函数使用指定的函数过滤数组中的元素,并返回过滤后的数组。
提示:源数组不会受到影响,过滤结果只反映在返回的结果数组中。
语法格式如下:
$.grep( array, function [,invert ] )
参数 | 描述 |
---|---|
array | Array类型 将被过滤的数组。 |
function | Function类型 指定的过滤函数。grep()方法为function提供了两个参数:其一为当前迭代的数组元素,其二是当前迭代元素在数组中的索引。 |
invert | Boolean类型默认值为false,指定是否反转过滤结果。如果参数invert为true,则结果数组将包含function返回false的所有元素。 |
var arr =$.grep( [0,1,2], function(n,i){
return n > 0;
});
console.log(arr);//[1,2]
var arr =$.grep( [0,1,2], function(n,i){
return n > 0;
},true);//返回n<=0的元素
console.log(arr);//[0]
3.$.map( )函数
使用$.map( )方法可以在遍历数组或对象成员的同时,经过回调函数的调用,然后转换到另一个新的数组中(这也是和 $.each()的最大区别)。
语法格式如下:
$.map(obj,fn(value,index))
//遍历数组
$(function(){
var arr = ["a","b","c","d"];
var arr1 = $.map(arr,function(value,index){ //注意回调函数的参数位置和$.each()的不一致
console.log(index+value);
var val = value.toUpperCase();//可以在回调函数中对成员进行操作,然后将其返回到新的数组中。toUpperCase()方法转换字符为大写。
return val;//一定要使用return返回值,否则新数组接受不到
});
console.log(arr1);
var res = Object.prototype.toString.call(obj1);//使用Object.prototype.toString.call()方法返回传入变量的类型
console.log(res);
});
//首先依次输出遍历的结果
a0
b1
c2
d3
//输出arr1的结果(可以看出是返回值组成的新数组)
[A,B,C,D]
//输出res结果为
Object Array