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 强制刷新页面的实现代码
Dec 13 Javascript
HTML Dom与Css控制方法
Oct 25 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
javascript实现列表切换效果
May 02 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
理解AngularJs指令
2015/12/10 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
Python单例模式实例详解
2017/03/01 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
Python流行ORM框架sqlalchemy安装与使用教程
2019/06/04 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
用 python 进行微信好友信息分析
2020/11/28 Python
汉森批发:Hansen Wholesale
2018/05/24 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
公司培训心得体会
2014/01/03 职场文书
家长会学生演讲稿
2014/04/26 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python