遍历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 相关文章推荐
编写Js代码要注意的几条规则
Sep 10 Javascript
关于JavaScript中原型继承中的一点思考
Jul 25 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
Bootstrap-table使用footerFormatter做统计列功能
Sep 07 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
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
制作美丽的拉花
2021/03/03 冲泡冲煮
判断PHP数组是否为空的代码
2011/09/08 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP钩子实现方法解析
2019/05/21 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
dojo随手记 gird组件引用
2011/02/24 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
美德好少年事迹材料
2014/01/19 职场文书
安全第一课观后感
2015/06/18 职场文书
债务追讨律师函
2015/06/24 职场文书
服装店员工管理制度
2015/08/07 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
Django开发RESTful API实现增删改查(入门级)
2021/05/10 Python
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技