数组的循环,对象的循环。for,for -in,$().each()与 $.each()以及$().map()与$.map()和arr.map()的应用与区别
for 与for~in
数组:
var
array=[1,2,3,4,5];
//定义一个数组,实现数组元素的遍历。
用For...
in
实现
for
(
var
i
in
array){
alert(array[i]);
//数组的元素
}
用
for
循环实现
for
(
var
i=0;i<array.length;i++){
alert(array[i]);
//数组的元素
}
for(var i in obj){ //json循环
alert(i+"="+obj[i]);
}弹出:a=15 b=8 c=12
var obj={"name":"wjy","age":26,"sex":"female"};//定义一个object对象
var keys=[];//定义一个数组用来接受key
var values=[];//定义一个数组用来接受value
for(var key in obj){
keys.push(key);
values.push(obj[key]);//取得value
alert(eval("obj."+key));//循环内逐一打印value值
}
alert(obj.name);//wjy
alert("keys is :"+keys+" and values is :"+values);
//keys is : name,age,sex and values is : wjy,26,female
总结:数组既可以用for循环,也可以用for in循环(区别:for循环可以设置i的开始数字,可以从任何一个位置开始循环,但是for in循环不能设置,只能从第一个到最后一个进行循环)。
json只能用for in循环,因为json的下标是没有规律的字符串,没有length。
所以,一般数组就用for循环,json用for in循环。
$().each() 与$.each()
通用遍历方法,可用于遍历对象和数组。$().each(),回调函数拥有两个参数:
第一个为对象的成员或数组的索引,第二个为对应变量或内容。如需退出each循环可使回调函数返回false.
$().each() 方法主要用于DOM遍历,each() 方法规定为每个匹配元素规定运行的函数。$().each,对于这个方法,在dom处理上面用的较多。
现有如下两个select 计划类别: <select id="PLANTYPE"> <option value="0">-所有-</option> <option value="1">新建</option> <option value="2">续建</option> </select> 申报类型: <select id="AUDITTYPE"> <option value="0">-所有-</option> <option value="1">申报</option> <option value="2">修改</option> </select>
使用each方法获取option中的文本值,即 -所有-、新建、续建...
如果只使用一次each循环 可从option处开始
$("option").each(function(index,data){ console.info($( data ).text()); //或者console.info($(this).text()); })
也可从select处开始
$("select").each(function( index,data){ $("option", data).each(function(m,n){ console.info($(this).text()); }) })
$("option", data)一定要加上 data或者$("option",this),表示此对象下的option
否则就是所有的option。
$.each()
each还有一种用法jQuery.each(object, [callback]) $.each()
不同于jQuery对象的$().each()方法,此方法可用于例遍任何对象。
用此方法同样遍历上述代码
$.each($("option"),function(index,data){ console.info(index+" "+data); })
也可以遍历数组
$.each( [0,1,2], function(i, n){ console.info( "Index:" + i + ": " + n );
this; //这里的this指向每次遍历中Array的当前元素
});
1.有附加参数
$.each(Array, function(p1, p2){
this; //这里的this指向每次遍历中Array的当前元素
p1; p2; //访问附加参数
}, ['参数1', '参数2']);
2.无附加参数
$.each(Array, function(i, value) {
this; //this指向当前元素
i; //i表示Array当前下标
value; //value表示Array当前元素
});
遍历对象
$.each({ name: "itmyhome", addr: "Beijing" },function(i, n){ console.info("Key: " + i + ", Value: " + n); });
//有附加参数
$.each(Object, function(p1, p2) {
this; //这里的this指向每次遍历中Object的当前属性值
p1; p2; //访问附加参数
}, ['参数1', '参数2']);
//无附加参数
$.each(Object, function(name, value) {
this; //this指向当前属性的值
name; //name表示Object当前属性的名称
value; //value表示Object当前属性的值
});
$.map( object, callback )
$.map() 函数用于使用指定函数处理数组中的每个元素(或对象的每个属性),并将处理结果封装为新的数组返回。
注意:1. 在jQuery 1.6 之前,该函数只支持遍历数组;从 1.6 开始,该函数也支持遍历对象。
2. map()还会为函数传入两个参数:其一是当前迭代的元素或属性值,其二是当前迭代项的数组索引或对象属性名。
3. 该函数返回值将作为结果数组中的一个元素,如果返回值为null或undefined,则不会被添加到结果数组中。
<script> $(function () { var arr =$.map( [0,1,2], function(n){ return n + 4; }); $("span").text(arr.join(",")); }) </script>//4,5,6 <script> $(function () { var dimensions = { width: 10, height: 15, length: 20 }; var keys = $.map( dimensions, function( value, key ) { return key; }); $("span").text(keys.join(", ")); })//width, height, lengt
$().map()
把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。 callback 函数内部,this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项,或者是要被插入结果集中的数据项的数组。如果返回的是数组,数组内的元素会被插入集合中。如果函数返回 null 或 undefined,则不会插入任何元素。
$("p").append( $("input").map(function(index,item){//注意这里的参数顺序和each()一样的 return $(this).val(); }).get().join(", ") );
$().map()的返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。而$.map()返回的是原生数组。
原生数组才能用原生数组的方法。
arr.map() 是原生数组的方法。
[].map(function(value,key){
})