您的位置:首页 > Web前端 > JQuery

$.grep ,$.map,jquery筛选数组之grep、each、inArray、map的用法及遍历json对象

2015-06-03 13:50 976 查看
var data = $.grep(this.dataArray, this.proxy(function(item, idx){

    return $.inArray(item.id, this.checkedIdArray) > -1;

    }));

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[i]);

        }

        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[i]){

        alert(key+':'+json[i][key]);

    }

}

</script>

遍历json对象

有如下 json对象:

var obj ={”name”:”冯娟”,”password”:”123456″,”department”:”技术部”,”sex”:” 女”,”old”:30};

遍历方法:

for(var p in obj){

    str = str+obj[p]+’,';

    return str;

}

---------------------------------------------------------------------------

Jquery中对数组的操作大致有一下几种形式:

1、$.each( collection, callback(indexInArray, valueOfElement) )

$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。

其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。

下面举个例子:

var mem = ['a','b','c'];

var returnvalue = $.each(mem, function(index) {

alert(index);

});



var mem = ['a','b','c'];

var returnvalue = $.each(mem, function(index,value) {

alert(index + " " + value);

});



var mem = ['a','b','c'];

var returnvalue = $.each(mem, function() {

});

2、$.map( array, callback(elementOfArray, indexInArray) )

$.map()这个函数和each非常的相似,最重要的区别就是map是用来生成一个新的数组,也就是说我们可以在回调函数中修改遍历到的每一个元素(通过return返回新的值,不return就没有值了),最后返回一个新的数组。

参数方面和each基本没有什么区别,不多做解释。

下面举个例子:

var arr = [ "a", "b", "c", "d", "e" ];

var arr2 = jQuery.map(arr, function(n, i){

return (n.toUpperCase() + i);

});   www.2cto.com

alert(arr);

alert(arr2);

程序执行后的结果为:

a,b,c,d,e

A0,B1,C2,D3,E4

3、$.grep( array, function(elementOfArray, indexInArray) [, invert] )

$.grep()函数除去了不需要的元素,起到了一个筛选的作用,通过将它的元素通过一个测试函数,也就是grep()的第二个参数,需要注意的是这里参数和前面两个函数的回调函数的参数顺序相反。通过这两个参数来控制自己需要哪些元素,通过return语句返回出来(return true说明这个元素是需要的)。另外,在grep()中可以通过正则表达式(return elementOfArray.match(正则表达式))来控制筛选,这样能使筛选更加的灵活、强大。grep()函数和map()函数一样也是生成一个新的数组。grep()中的第三个参数是一个布尔数通常是省略的,默认是false,如果设置为true,那么回调函数的返回值的效果刚好相反,返回true的会被去掉。

下面举个例子:

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];

arr = jQuery.grep(arr, function(n, i){

return (n != 5 && i > 4);

});

4、filter (fn) 参数是函数;
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript