jquery中object对象循环遍历的方法
一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用js循环遍历,而对象则不可以。其实呢,对象同样可以循环遍历的啊。不用转换也可以循环!说明你对js或者jquery的某些操作不是很熟练!在这里我简单介绍一下!
案例
我们看如下对象:
|
1
2
3
4
5
6
7
8
9
|
var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99} |
假如上面是后台返回的一个key,一个是value的对象(这种对象相信大家经常遇到吧!),现在要把这个内容,循环绑定到一个表格中。有的朋友对对象的循环就不知道怎么操作了!今天我给大家介绍两个方法!
方法一:
用$.each的方式进行循环!
假如你不知道$.each的话,建议大家网上搜一搜。当然也可以搜索一下“jquery的$().each,$.each的区别”,关于他们的区别,我在这里就不详细介绍了。可能有的朋友$().each这个方式用的比较多,今天主要给大家介绍$.each。
$.each()可以遍历数组和对象。方式如下:
|
1
2
3
4
|
$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n){alert(“索引:”+i,”对应值为:”+n.name);}); |
也可以这么遍历:
|
1
2
3
4
|
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循环!
另外,假如我们遇到如下对象:
|
1
2
3
4
5
6
7
8
9
|
var data={ 张三:69, 李四:72, 王五:90, 二麻子:88, 前端博客:100, haorooms : 98, 王大壮:99} |
我们可以用data.haorooms得到98,但是我们用“data.前端博客”会报错,因此,在我们用汉字做key值的时候,选取的时候应该用data["前端博客"],这种方式来选择,不要再用点号了。
jquery中object对象循环遍历的方法的更多相关文章
- jquery中关于对象类型的判断原理
class2type[ core_toString.call(obj) ] jquery中关于对象类型的判断原理 jquery源码中关于类型判断的工具函数为type,调用方法为$.type()或者jQ ...
- jQuery中异步操作对象Deferred
以下介绍一下jQuery中Deferred对象的使用: 1. 通过$.Deferred生成一个deferredObj对象; 2. deferredObj.done()指定操作成功时的回调函数; 3. ...
- python中字典的循环遍历的两种方式
开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...
- HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- jquery中交替点击事件toggle方法的使用示例
jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...
- Map<String, String>循环遍历的方法
Map<String, String>循环遍历的方法 Map<String, String>循环遍历的方法 Map<String, String>循环遍历的方法 下 ...
- jquery中获取iframe的id的方法:
jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...
- JavaScript基础精华03(String对象,Array对象,循环遍历数组,JS中的Dictionary,Array的简化声明)
String对象(*) length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) charAt(index)方法:获取指定索引位置的字符.(索引从0开始) indexOf(‘ ...
随机推荐
- VMware vSphere6.0 服务器虚拟化部署安装图解
一 VMware vSphere部署的前期规划要点 1 vSphere的优点 (略) 2 如何利用现在的设备架构虚拟化环境 在虚拟化过程中,用户大多会考虑目前现有的服务器.存储.交换机等基础设备是否可 ...
- Hibernate中session的save方法问题
今天在使用session.save(),进行插入数据操作时,一直没有成功,也没有报错.后来发现是因为没有创建事务,提交事务的原因 你对flush和commit的意思没有理解到:1,flush代表刷新, ...
- 【转】浅谈对主成分分析(PCA)算法的理解
以前对PCA算法有过一段时间的研究,但没整理成文章,最近项目又打算用到PCA算法,故趁热打铁整理下PCA算法的知识.本文观点旨在抛砖引玉,不是权威,更不能尽信,只是本人的一点体会. 主成分分析(PCA ...
- Java-JFrame窗体美化
Java-JFrame窗体美化 JFrame默认的窗体比较土,可以通过一定的美化,让窗体表现的比较漂亮,具体要根据设计的设计图进行美化: JFrame美化的大致思路:先将JFrame去除默认美化效果, ...
- springBoot 集成swagger2.9.2
加依赖 <!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger-ui --> <dependen ...
- linux 下 docker-compose安装
docker和dockers-compose的版本兼容对照 以下是我的服务器的相关信息 linux版本 [root@izbp16fm097gaw3tdaog2wz bin]# cat /proc/ve ...
- DeepFaceLab小白入门(5):训练换脸模型!
训练模型,是换脸过程中最重要的一部分,也是耗时最长的一部分.很多人会问到底需要多少时间?有人会告诉你看loss值到0.02以下就可以了.我会告诉你,不要看什么数值,看预览窗口的人脸.看第二列是否和第一 ...
- html5音频audio对象封装成vue组件的方式调用以及setTimeout如何在vue2生效 (vue2正在熟悉中,ajax还是用jQuery来写舒服些,里面含有一些php写法可略过) 此网页应用在PC不考虑手机端
// vue2 组件封装如下: <template> <div> <div><!--vue element 组件的引用 Switch 开关 不懂请自行百度(重 ...
- vue创建路由,axios前后台交互,element-ui配置使用,django contentType组件
vue中创建路由 每一个vue组件都有三部分组成 template:放html代码 script:放js相关 style:放css相关 vue中创建路由 1.先创建组件 Course.vue 2.ro ...
- JSON Web Token(JWT)的详解
1.传统身份验证和JWT的身份验证 传统身份验证: HTTP 是一种没有状态的协议,也就是它并不知道是谁是访问应用.这里我们把用户看成是客户端,客户端使用用户名还有密码通过了身份验证,不过下回这个客户 ...