快捷導(dǎo)航

jquery遍歷數(shù)組與篩選數(shù)組的方法

更新時(shí)間：2013年11月05日 17:06:57 作者：

在jquery是遍歷篩選數(shù)組有多種方法與函數(shù)了，包括有:grep、each、inArray、map同時(shí)也要以遍歷json對(duì)象哦，下面給各位同學(xué)介紹一下具體的操作方法

grep
grep()方法用于數(shù)組元素過(guò)濾篩選
grep(array,callback,invert)
array：待過(guò)濾數(shù)組;
callback：處理數(shù)組中的每個(gè)元素，并過(guò)濾元素，該函數(shù)中包含兩個(gè)參數(shù)，第一個(gè)是當(dāng)前數(shù)組元素的值，一個(gè)是當(dāng)前數(shù)組元素的下標(biāo)，即元素索引值。此函數(shù)應(yīng)返回一個(gè)布爾值。另外，此函數(shù)可設(shè)置為一個(gè)字符串，當(dāng)設(shè)置為字符串時(shí)，將視為“l(fā)ambda-form”（縮寫形式？），其中 a 代表數(shù)組元素，i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
invert：布爾型可選項(xiàng)，默認(rèn)值false，值為true或false，如果 “invert” 為 false 或?yàn)樵O(shè)置，則函數(shù)返回?cái)?shù)組中由過(guò)濾函數(shù)返回 true 的元素，當(dāng)”invert” 為 true，則返回過(guò)濾函數(shù)中返回 false 的元素集

復(fù)制代碼代碼如下:

 
<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[i]);
        }
        for (key in filterarray){
            alert(filterarray[key]);
        }
    }
);
</script>
 

each
each的使用方法
在jQuery里有一個(gè)each方法，用起來(lái)非常的爽，不用再像原來(lái)那樣寫for循環(huán)，jQuery源碼里自己也有很多用到each方法。
其實(shí)jQuery里的each方法是通過(guò)js里的call方法來(lái)實(shí)現(xiàn)的。

復(fù)制代碼代碼如下:

<script type='text/javascript' src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
    function(){
        var anObject = {one:1,two:2,three:3};//對(duì)json數(shù)組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
jQuery.isArray(obj) 是 jQuery 1.3 新增。測(cè)試對(duì)象是否為數(shù)組。返回值:Boolean
參數(shù) : objObject用于測(cè)試是否為數(shù)組的對(duì)象
示例 :檢測(cè)是否為數(shù)組

復(fù)制代碼代碼如下:

<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);//返回該值在數(shù)組中的鍵值，返回1
        alert(anArray[index]);//value is two
    }
);
</script>

map
map() 把每個(gè)元素通過(guò)函數(shù)傳遞到當(dāng)前匹配集合中，生成包含返回值的新的 jQuery 對(duì)象。
由于返回值是 jQuery 封裝的數(shù)組，使用 get() 來(lái)處理返回的對(duì)象以得到基礎(chǔ)的數(shù)組。
.map() 方法對(duì)于獲得或設(shè)置元素集的值特別有用。請(qǐng)思考下面這個(gè)帶有一系列復(fù)選框的表單

復(fù)制代碼代碼如下:

<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對(duì)象：

復(fù)制代碼代碼如下:

<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[i]){
        alert(key+':'+json[i][key]);
    }
}
</script>

遍歷json對(duì)象
有如下 json對(duì)象：

復(fù)制代碼代碼如下:

var obj ={”name”:”馮娟”,”password”:”123456″,”department”:”技術(shù)部”,”sex”:” 女”,”old”:30};
遍歷方法：
for(var p in obj){
    str = str+obj[p]+',';
    return str;
} 

您可能感興趣的文章: