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 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
AngularJS基础知识笔记之表格
May 10 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
ES6中Class类的静态方法实例小结
Oct 28 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
Vue绑定用户接口实现代码示例
Nov 04 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
博士208HAF收音机实习报告
2021/03/02 无线电
php Mysql日期和时间函数集合
2007/11/16 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP加密解密类实例分析
2015/04/20 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
javascript showModalDialog 内跳转页面的问题
2010/11/25 Javascript
JavaScript函数详解
2014/11/17 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
浅谈vue.js中v-for循环渲染
2017/07/26 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
Python矩阵常见运算操作实例总结
2017/09/29 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python解析微信dat文件的方法
2020/11/30 Python
python如何实现递归转非递归
2021/02/25 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
企业为何需要商业计划书
2013/12/26 职场文书
党建目标管理责任书
2014/07/25 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
长城导游词300字
2015/01/30 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
趣味运动会加油词
2015/07/18 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Nginx跨域问题解析与解决
2022/08/05 Servers