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代码
Mar 05 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
js+cavans实现图片滑块验证
Sep 29 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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php 小乘法表实现代码
2009/07/16 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
React服务端渲染(总结)
2017/07/01 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python分析apache访问日志脚本分享
2015/02/26 Python
python 调用HBase的简单实例
2016/12/18 Python
Python 详解基本语法_函数_返回值
2017/01/22 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python编程的核心知识点总结
2021/02/08 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
我的小天地教学反思
2014/04/30 职场文书
保护环境倡议书500字
2014/05/19 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2015年元旦标语大全
2014/12/09 职场文书
实习单位指导教师评语
2014/12/30 职场文书
初中生活随笔
2015/08/15 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis