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解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
js中url对象化管理分析
Dec 29 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
手写实现JS中的new
Nov 07 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的ZIP压缩类分享
2014/05/04 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
理解JavaScript的prototype属性
2012/02/11 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
报关专员求职信范文
2014/02/22 职场文书
市场督导岗位职责
2015/04/10 职场文书
小学英语教师研修感悟
2015/11/18 职场文书
Python max函数中key的用法及原理解析
2021/06/26 Python
vue3中provide && inject的使用
2021/07/01 Vue.js
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
分享Python获取本机IP地址的几种方法
2022/03/17 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript