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自适应宽度的瀑布流实现思路
Feb 20 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
微信小程序 标签传入数据
May 08 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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文件中bom的PHP代码
2012/03/13 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
js new Date()实例测试
2019/10/31 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python闭包函数定义与用法分析
2018/07/20 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
七年级数学教学反思
2014/01/22 职场文书
运动会稿件100字
2014/09/24 职场文书
地陪导游欢迎词
2015/01/26 职场文书
运动会入场词
2015/07/18 职场文书
PHP解决高并发问题
2021/04/01 PHP
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
德生2P3收音机开箱评测
2022/04/30 无线电
vue递归实现树形组件
2022/07/15 Vue.js