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 学习笔记(九)call和apply方法
Jan 11 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
详解js的视频和音频采集
Aug 09 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
Node.js API详解之 os模块用法实例分析
May 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
Terran剧情介绍
2020/03/14 星际争霸
php 常用类汇总 推荐收藏
2010/05/13 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
PHP获取搜索引擎关键字来源的函数(支持百度和谷歌等搜索引擎)
2012/10/03 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
2016/01/26 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
python调用cmd复制文件代码分享
2013/12/27 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python之reload流程实例代码解析
2018/01/29 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
python实现猜数字游戏
2020/03/25 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
python实现拼图小游戏
2020/02/22 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
我爱我的祖国演讲稿
2014/05/04 职场文书
质量承诺书格式
2014/05/20 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
小学班主任事迹材料
2014/12/17 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
电力安全学习心得体会
2016/01/18 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书