jquery中object对象循环遍历的方法


Posted in Javascript onDecember 18, 2015

一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以。其实呢,对象同样可以循环遍历的啊。不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下!

案例

我们看如下对象:

var data={
  张三:69,
  李四:72,
  王五:90,
  二麻子:88,
  前端博客:100,
  haorooms : 98,
  王大壮:99
}

假如上面是后台返回的一个key,一个是value的对象(这种对象相信大家经常遇到吧!),现在要把这个内容,循环绑定到一个表格中。有的朋友对对象的循环就不知道怎么操作了!今天我给大家介绍两个方法!

方法一:

用$.each的方式进行循环!

假如你不知道$.each的话,建议大家网上搜一搜。当然也可以搜索一下“jquery的$().each,$.each的区别”,关于他们的区别,我在这里就不详细介绍了。可能有的朋友$().each这个方式用的比较多,今天主要给大家介绍$.each。

$.each()可以遍历数组和对象。方式如下:

$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n)
{
alert(“索引:”+i,”对应值为:”+n.name);
});

也可以这么遍历:

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});

输出:one   two  three  four   five
最爽的是可以遍历数组:

var obj =data;//上面复制的data
$.each(obj, function(key, val) {
alert(obj[key]);//可以输出成绩
console.log(key);//可以输出姓名
});

方法二:

用for in循环,可以遍历obj

对上面的对象,我们可以这么写来循环!

for(var i in data){
 console.dir(i);//输出姓名
 console.dir(data[i]);//输出分数
}

for in循环相信大家应该不陌生!for循环我们用到比较多的是for(var i=0;i<array.length;i++)这样,这个主要是针对数组来循环的。对于对象,我们通常用for in循环!

另外,假如我们遇到如下对象:

var data={
  张三:69,
  李四:72,
  王五:90,
  二麻子:88,
  前端博客:100,
  haorooms : 98,
  王大壮:99
}

我们可以用data.haorooms得到98,但是我们用“data.前端博客”会报错,因此,在我们用汉字做key值的时候,选取的时候应该用data["前端博客"],这种方式来选择,不要再用点号了。

以上就是jquery中object对象循环遍历的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
解决AJAX中跨域访问出现'没有权限'的错误
Aug 20 Javascript
页面中iframe相互传值传参
Dec 13 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
浅析Vue中method与computed的区别
Mar 06 Javascript
vue基于element的区间选择组件
Sep 07 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 Javascript
JavaScript的Number对象的toString()方法
Dec 18 #Javascript
JavaScript ParseFloat()方法
Dec 18 #Javascript
jquery中ajax跨域方法实例分析
Dec 18 #Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 #Javascript
JavaScript Math.round() 方法
Dec 18 #Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 #Javascript
js格式化时间的方法
Dec 18 #Javascript
You might like
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php指定函数参数默认值示例代码
2013/12/04 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
Python随手笔记第一篇(2)之初识列表和元组
2016/01/23 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
python元组拆包实现方法
2021/02/28 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
总经理司机岗位职责
2014/02/06 职场文书
大学生军训感想
2014/02/16 职场文书
《燕子》教学反思
2014/02/18 职场文书
成绩单家长评语大全
2014/04/16 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
化验员岗位职责
2015/02/14 职场文书
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android