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 相关文章推荐
js 单击式的下拉菜单效果实例
Aug 13 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
js实现二代身份证号码验证详解
Nov 20 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
Jan 16 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
JS实现打字游戏
Dec 17 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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 feof用来识别文件末尾字符的方法
2010/08/01 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
Laravel5.7 数据库操作迁移的实现方法
2019/04/12 PHP
$()JS小技巧
2007/07/21 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
常用DOM整理
2015/06/16 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
JavaScript实现短信倒计时60s
2017/10/09 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python单例设计模式实现解析
2020/01/07 Python
Python 定义只读属性的实现方式
2020/03/05 Python
python中threading开启关闭线程操作
2020/05/02 Python
食品营养与检测应届生求职信
2013/11/08 职场文书
函授自我鉴定范文
2014/02/06 职场文书
商务经理岗位职责
2014/07/30 职场文书
12.4全国法制宣传日活动方案
2014/11/02 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android
什么是SOLID
2022/03/24 Javascript
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL