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 相关文章推荐
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
一步步教大家编写酷炫的导航栏js+css实现
Mar 14 Javascript
BOM系列第二篇之定时器requestAnimationFrame
Aug 17 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
JS实现全屏预览F11功能的示例代码
Jul 23 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 Javascript
vue中实现高德定位功能
Dec 03 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP+DBM的同学录程序(3)
2006/10/09 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
学习ExtJS form布局
2009/10/08 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
浅谈Vue.nextTick 的实现方法
2017/10/25 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
vue $mount 和 el的区别说明
2020/09/11 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
Python读写及备份oracle数据库操作示例
2018/05/17 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
python实现决策树分类(2)
2018/08/30 Python
设置python3为默认python的方法
2018/10/31 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python轮询机制控制led实例
2020/05/03 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
报名委托书
2015/01/29 职场文书
2015年体育部工作总结
2015/04/02 职场文书
廉政承诺书2015
2015/04/28 职场文书
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android