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在事件监听方面的兼容性小结
Apr 07 Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
谈一谈javascript中继承的多种方式
Feb 19 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 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 $_SERVER详解
2009/01/16 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
2020/11/05 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
python实现微信自动回复机器人功能
2019/07/11 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
材料物理专业大学毕业生求职信
2013/10/15 职场文书
业务员岗位职责范本
2013/12/15 职场文书
高中生操行评语
2014/04/25 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
创卫工作总结2015
2015/04/22 职场文书
班级班风口号大全
2015/12/25 职场文书
教师教育心得体会
2016/01/19 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android