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 相关文章推荐
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
Java中Timer的用法详解
Oct 21 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
js实现的格式化数字和金额功能简单示例
Jul 30 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
PHP设计模式(七)组合模式Composite实例详解【结构型】
2020/05/02 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
js自定义回调函数
2015/12/13 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[05:31]干嘛呢兄弟!DOTA2 TI9语音轮盘部分出处
2019/05/14 DOTA
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[51:39]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第二场 2月7日
2021/03/11 DOTA
举例详解Python中的split()函数的使用方法
2015/04/07 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Python读写文件基础知识点
2019/06/10 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python实现上下文管理器的方法
2020/08/07 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
乌克兰在线药房:Аптека24
2019/10/30 全球购物
员工工作表扬信范文
2014/01/13 职场文书
反邪教标语
2014/06/23 职场文书
2014年财政所工作总结
2014/11/22 职场文书
办公用房租赁协议书
2014/11/29 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Python加密与解密模块hashlib与hmac
2022/06/05 Python