这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇遍历 js 中对象的属性和值的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
今天优化项目时,遇到了关于 "遍历 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 中对象的属性和值的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0529/330358.html