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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
Feb 20 Javascript
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
JS用最简单的方法实现四舍五入
Aug 27 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 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中调用JAVA
2006/10/09 PHP
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
php下MYSQL limit的优化
2008/01/10 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
JS获取页面input控件中所有text控件并追加样式属性
2013/02/25 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
js获得页面的高度和宽度的方法
2014/02/23 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
jquery实现类似淘宝星星评分功能有截图
2014/09/15 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
2019/05/14 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
分享一下Python数据分析常用的8款工具
2018/04/29 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
德语专业求职信
2014/03/12 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
2016自主招生教师推荐信范文
2015/03/23 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
MySQL数据库表约束讲解
2022/06/21 MySQL