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获取iframe里的值示例代码
Jun 24 Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
微信小程序Echarts图表组件使用方法详解
Jun 25 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
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 全角转半角实现代码
2010/05/16 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Python random模块用法解析及简单示例
2017/12/18 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
本科毕业生求职信
2014/06/15 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
2015年六一儿童节活动总结
2015/02/11 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
征求意见函
2015/06/05 职场文书
导盲犬小Q观后感
2015/06/11 职场文书
会议承办单位欢迎词
2015/09/30 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
关于MySQL中explain工具的使用
2023/05/08 MySQL