数组的循环,对象的循环。for,for -in,$().each()与 $.each()以及$().map()与$.map()和arr.map()的应用与区别

for 与for~in

数组:

var array=[1,2,3,4,5];//定义一个数组,实现数组元素的遍历。

用For...in实现
for(var 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. 该函数返回值将作为结果数组中的一个元素,如果返回值为nullundefined,则不会被添加到结果数组中。

 

<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){

})

 

 

 

 

 

 

 

 

 

 

posted @ 2018-03-26 15:11  姗崽崽崽  阅读(277)  评论(0编辑  收藏  举报