jquery 多种遍历数组方法


grep
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var array = [1,2,3,4,5,6,7,8,9];
        var filterarray = $.grep(array,function(value){
            return value > 5;//筛选出大于5的
        });
        for(var i=0;i<filterarray.length;i++){
            alert(filterarray );
        }
        for (key in filterarray){
            alert(filterarray[key]);
        }
    }
);
</script>
 
each
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var anObject = {one:1,two:2,three:3};//对json数组each
        $.each(anObject,function(name,value) {
            alert(name);
            alert(value);
        });
        var anArray = ['one','two','three'];
        $.each(anArray,function(n,value){
            alert(n);
            alert(value);
        }
        );
    }
);
</script>
inArray
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var anArray = ['one','two','three'];
        var index = $.inArray('two',anArray);
        alert(index);//返回该值在数组中的键值,返回1
        alert(anArray[index]);//value is two
    }
);
</script>
map
<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var strings = ['0','1','2','3','4','S','6'];
        var values = $.map(strings,function(value){
                var result = new Number(value);
                return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
            }
        );
        for (key in values) {
            alert(values[key]);
        }
    }
);
</script>
 
遍历json对象
<script>
var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
    for(var key in json){
        alert(key+':'+json[key]);
    }
}
</script>

遍历json对象
有如下 json对象:
var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};
遍历方法:
for(var p in obj){
    str = str+obj[p]+’,';
    return str;
}

几种遍历方案...

这里来使用each方法来遍历json对象的数据代码
varcomments=[{"username":"张三","content":"沙发."},{"username":"李四","content":"板凳."},{"username":"王五","content":"地板."}];

varhtml='';$.each( comments ,function(commentIndex, comment) {html+='<div class="comment"><h6>'+comment['username']+':</h6><p class="para">'+comment['content']+'</p></div>';})

$('#resText').html(html);说明: each在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数。这里所指的
则为commentIndex, 而每一个commentIndex所对应的值则为comment, comment则为其中一个json对象,即如{"username":"张三","content":"沙发."}

  each函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。
    jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给 jQuery的each方法.换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供 的each方法则是对jQuery内部的子元素进行逐个调用。    jQuery.prototype.each=function( fn, args ) {       return jQuery.each( this, fn, args );    }
   让我们看一下jQuery提供的each方法的具体实现,     jQuery.each(obj,fn,arg)       该方法有三个参数:进行操作的对象obj,进行操作的函数fn,函数的参数args。     让我们根据ojb对象进行讨论:
1.obj对象是数组 each方法会对数组中子元素的逐个进行fn函数调用,直至调用某个子元素返回的结果为false为止,也就是说,我们可以在提供的fn函数进行处理,使 之满足一定条件后就退出each方法调用。当each方法提供了arg参数时,fn函数调用传入的参数为arg,否则为:子元素索引,子元素本身 2.obj 对象不是数组 该方法同1的最大区别是:fn方法会被逐次不考虑返回值的进行进行。换句话说,obj对象的所有属性都会被fn方法进行调用,即使fn函数返回false。调用传入的参数同1类似。 jQuery.each=function( obj, fn, args ) {     if ( args ) {        if ( obj.length == undefined ){            for ( var i in obj )              fn.apply( obj, args );        }else{            for ( var i = 0, ol = obj.length; i < ol; i++ ) {              if ( fn.apply( obj, args ) === false )                   break; 
          }
       }   } else {        if ( obj.length == undefined ) {            for ( var i in obj )                fn.call( obj, i, obj );        }else{           for ( var i = 0, ol = obj.length, val = obj[0]; i < ol && fn.call(val,i,val) !== false; val = obj[++i] ){} 
       }  }   return obj; }   需要特别注意的是each方法中fn的具体调用方法并不是采用简单的fn(i,val)或fn(args),而是采用了 fn.call(val,i,val)或fn.apply(obj.args)的形式,这意味着,在你自己的fn的实现中,可以直接采用this指针引用 数组或是对象的子元素。这种方式是绝大多数jQuery所采用的一种实现方式。





   本文转自My_King1 51CTO博客,原文链接:http://blog.51cto.com/apprentice/1360583,如需转载请自行联系原作者





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值