一个朋友问对象如何转为数组,当我问他为啥要转得时候,他告诉我,数组可以用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对象循环遍历的方法的更多相关文章

  1. jquery中关于对象类型的判断原理

    class2type[ core_toString.call(obj) ] jquery中关于对象类型的判断原理 jquery源码中关于类型判断的工具函数为type,调用方法为$.type()或者jQ ...

  2. jQuery中异步操作对象Deferred

    以下介绍一下jQuery中Deferred对象的使用: 1. 通过$.Deferred生成一个deferredObj对象; 2. deferredObj.done()指定操作成功时的回调函数; 3. ...

  3. python中字典的循环遍历的两种方式

    开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...

  4. HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)

    HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...

  5. jQuery中detach&&remove&&empty三种方法的区别

    jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...

  6. jquery中交替点击事件toggle方法的使用示例

    jquery中交替点击事件toggle方法中有两个参数,分别是要交替执行的事件.如果不传参默认是显示隐藏功能,下面有个不错的示例,感兴趣的朋友可以参考下 复制代码代码如下: $('#clickId‘) ...

  7. Map<String, String>循环遍历的方法

    Map<String, String>循环遍历的方法 Map<String, String>循环遍历的方法 Map<String, String>循环遍历的方法 下 ...

  8. jquery中获取iframe的id的方法:

    jquery中获取iframe的id的方法: var frameId = window.frameElement && window.frameElement.id || ''; al ...

  9. JavaScript基础精华03(String对象,Array对象,循环遍历数组,JS中的Dictionary,Array的简化声明)

    String对象(*) length属性:获取字符串的字符个数.(无论中文字符还是英文字符都算1个字符.) charAt(index)方法:获取指定索引位置的字符.(索引从0开始) indexOf(‘ ...

随机推荐

  1. CPP-网络/通信:用CMarkup类操纵XML

      首先到http://www.firstobject.com/下载CMarkup教学版,解压后里面是一个DEMO,将Markup.h .cpp拷贝并添加到工程中,第一次编译可能会出现预编译错误,解决 ...

  2. iOS项目工程及目录结构

    做过一些iOS的项目,不同项目的沉淀没有积累到一起,目录的管理都在后期随着人员的增加越来越混乱,因此在这里做一些梳理,希望达到两个目的. 一套相对通用的目录结构,作为后续项目的模版. 积累相应的基础库 ...

  3. Leetcode5078. 负二进制数相加

    问题: 5078. 负二进制数相加 给出基数为 -2 的两个数 arr1 和 arr2,返回两数相加的结果. 数字以 数组形式 给出:数组由若干 0 和 1 组成,按最高有效位到最低有效位的顺序排列. ...

  4. thinkcmf5增加微信管理app笔记

    simplewind/extend/目录下增加 EasyWeChat Monolog   //是PHP的一个日志类库  https://segmentfault.com/a/1190000002775 ...

  5. 《linux设备驱动开发详解》笔记——18 ARM linux设备树

    18.1 设备树的起源 linux 2.6及之前,大量板级信息被硬编码到内核里,十分庞大,大量冗余代码: linux 2.6之前,引入了设备树: 设备树源于OpenFirmware,描述硬件的数据结构 ...

  6. 收集的有关mdk 3的使用方法

      收集来自网络上的有关mdk3的一些使用方法以及技巧(持续更新) b beacon泛洪攻击 -f 指定wifi名称的文件夹 -n 加上wifi名称 -w Fake WEP encrypted sta ...

  7. 集群环境(session多服务器共享的方案梳理)

    目前业界解决session共享的几种思路,我总结如下: 第一种办法:把原来存储在服务器磁盘上的session数据存储到客户端的cookie中去. 这样子,就不需要涉及到数据共享了.a客户端请求的时候, ...

  8. Python学习笔记:PyInstaller(exe程序打包)

    PyInstaller可以将Python程序打包成一个exe程序来独立运行,用户使用时只需要执行这个exe文件即可,不需要在机器上再安装Python及其他包就可运行了.另外,PyInstaller相较 ...

  9. 如何用好 Google 等搜索引擎?

    看见知乎上如何用好Google搜索的问题(http://www.zhihu.com/question/20161362),整理一下.感谢知乎大神 1.Choose Which Google? HTTP ...

  10. 光学字符识别OCR-2

    灰度聚类 接着我们就对图像的色彩进行聚类.聚类的有两个事实依据:         1.灰度分辨率   肉眼的灰度分辨率大概为40,因此对于像素值254和255,在我们肉眼看来都 只是白色:       ...