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 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
Node.js log4js日志管理详解
Jul 31 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
php反射应用示例
2014/02/25 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
Laravel下生成验证码的类
2017/11/15 PHP
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
2015/09/14 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
JavaScript canvas绘制折线图
2020/02/18 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
python 函数中的参数类型
2020/02/11 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python文件操作基础流程解析
2020/03/19 Python
python让函数不返回结果的方法
2020/06/22 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
用python对oracle进行简单性能测试
2020/12/05 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
大学生2014全国两会学习心得体会
2014/03/10 职场文书
投标诚信承诺书
2014/05/26 职场文书
护士找工作求职信
2014/07/02 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
SpringCloud Alibaba 基本开发框架搭建过程
2021/06/13 Java/Android
Nginx配置使用详解
2022/07/07 Servers