遍历js中对象的属性和值的实例


Posted in Javascript onNovember 21, 2016

今天优化项目时,遇到了关于”遍历js中对象的属性和值”的需求。之所以会有这个需求,是因为要做一个局部刷新表格内容的js插件。刚开始我去网上荡了一个js分页插件,但是智商实在捉急,搞了半天没搞出来!后来就怒了,干脆自己写一个好了。结果就遇到了这个问题!

问题:通过遍历属性名数组,获取对象的属性值失败

刚开始的错误代码如下:

for(var i=0;i<dataList.length;i++)
{
  var dataLine="<tr>";   
  for(var j=0;j<filedList.length;j++){
    dataLine+="<td>"+dataList[i].filedList[j]+"</td>"; 
  } 
  dataLine+="</tr>";
  $("#"+tableName).append(dataLine);
}

首先说一下,dataList里面放的是对象数组;filedList里面放的是对象的属性字段名数组。刚开始是这样想的,遍历dataList,每次都可以拿到一个对象,然后嵌套for循环,遍历filedList,每次拿到它的一个属性值,然后拼凑成表格。

比如:dataList[0]就是一个Emp对象,而Emp里面有id,name等属性。平常我们就可以通过dataList[0].id得到当前Emp对象的id值。但是如果遍历属性字段数组的话,就不能通过这种方式dataList[0].filedList[0]。这并不是说filedList[0]里面没有获取到值,因为我通过alert(filedList[0])已经得到了这个id值为1。那么为什么获取失败呢?因为它是去找Emp对象里面的一个叫做filedList[0]的属性了!Emp对象里面当然没有这个属性了,所以就理所应当的获取失败了,那么我们又该如何获取对象的属性值呢?

---------------------------------------------

解决方案:用“加强for循环”去遍历

正确代码如下:

for(var i=0;i<dataList.length;i++)
{
  var dataLine="<tr>";   
  for(var filedName in dataList[i]){
    dataLine+="<td>"+dataList[i][filedName]+"</td>"; 
  } 
  dataLine+="</tr>";
  $("#"+tableName).append(dataLine);
}

解决思路:既然dataList[i]是一个对象,那么我每次就可以拿到这个对象的属性名,然后通过dataList[i][filedName],即对象[属性名]的方式得到这个属性的属性值。

参考:JS获得一个对象的所有属性和方法

function displayProp(obj){  
  var names="";    
  for(var name in obj){    
    names+=name+": "+obj[name]+", "; 
  } 
  alert(names); 
}

由此看来,js的功能还是很强大的!

以上这篇遍历js中对象的属性和值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
JavaScript数组去重算法实例小结
May 07 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
vue实现登录功能
Dec 31 Vue.js
解读Vue组件注册方式
May 15 Vue.js
JavaScript数据结构链表知识详解
Nov 21 #Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 #Javascript
Node.js测试中的Mock文件系统详解
Nov 21 #Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 #Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 #Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 #Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 #Javascript
You might like
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
php源码的安装方法和实例
2019/09/26 PHP
jQuery TextBox自动完成条
2009/07/22 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Python进行数据科学工作的简单入门教程
2015/04/01 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
工地资料员岗位职责
2013/12/31 职场文书
应用英语专业自荐信
2014/01/26 职场文书
环保倡议书
2014/04/14 职场文书
个人查摆问题整改措施
2014/10/04 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
2014年就业工作总结
2014/11/26 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers