jquery遍历数组与筛选数组的方法


Posted in Javascript onNovember 05, 2013

grep
grep()方法用于数组元素过滤筛选
grep(array,callback,invert)
array:待过滤数组;
callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
invert:布尔型可选项,默认值false,值为true或false, 如果 “invert” 为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当”invert” 为 true,则返回过滤函数中返回 false 的元素集
 

<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里有一个each方法,用起来非常的爽,不用再像原来那样写for循环,jQuery源码里自己也有很多用到each方法。
其实jQuery里的each方法是通过js里的call方法来实现的。

<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
jQuery.isArray(obj) 是 jQuery 1.3 新增。测试对象是否为数组。  返回值:Boolean
参数 : objObject用于测试是否为数组的对象
示例 :检测是否为数组

<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
map() 把每个元素通过函数传递到当前匹配集合中,生成包含返回值的新的 jQuery 对象。
由于返回值是 jQuery 封装的数组,使用 get() 来处理返回的对象以得到基础的数组。
.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;
}
Javascript 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
JavaScript网页定位详解
Jan 13 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
Javascript创建类和对象详解
May 31 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
javascript alert乱码的解决方法
Nov 05 #Javascript
jquery三个关闭弹出层的小示例
Nov 05 #Javascript
jquery ajax post提交数据乱码
Nov 05 #Javascript
jquery ajax属性async(同步异步)示例
Nov 05 #Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 #Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 #Javascript
客户端js性能优化小技巧整理
Nov 05 #Javascript
You might like
扩展你的 PHP 之入门篇
2006/12/04 PHP
php 面向对象的一个例子
2011/04/12 PHP
关于Zend Studio 配色方案插件的介绍
2013/06/24 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php实现的日历程序
2015/06/18 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
python numpy库np.percentile用法说明
2020/06/08 Python
python 绘制正态曲线的示例
2020/09/24 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
运动会100米解说词
2014/01/23 职场文书
社区安全检查制度
2014/02/03 职场文书
关于学习的演讲稿
2014/05/10 职场文书
农行心得体会
2014/09/02 职场文书
建筑工地文明标语
2014/10/09 职场文书
自我查摆剖析材料
2014/10/11 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
Nginx 匹配方式
2022/05/15 Servers
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers