遍历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中对象的属性和值的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js中如何复制一个对象并获取其所有属性和属性对应的值

    在js中如何复制一个对象,例如如下一个js对象. 如果知道这个对象的所有属性自然就可以重新new一个,然后对每个属性赋值,就可以做到,但如果不知道呢?如何创建一个内容相同 的对象呢? 复制代码 代码如下: var obj={ colkey: "col", colsinfo: "NameList" } 最简单就是使用for in, 例如obj2就拥有了和obj完全相同的属性 复制代码 代码如下: var obj2=new Object(); for(var p in

  • js中遍历对象的属性和值的方法

    实例如下: var Statistics_Website_logo ={ 'Website_logo_title':'学而思', 'Website_logo_Theme':'教育行业', 'Website_logo_Company':'好未来' }; for (var Key in Statistics_Website_logo){ Websitelogo =Websitelogo+'&'+''+Key+'='+Statistics_Website_logo[Key]+''; } 以上这篇js中

  • JS遍历页面所有对象属性及实现方法

    for...in循环的Javascript示例: <html> <head> <title>一个使用到for...in循环的Javascript示例</title> </head> <body> <script type="text/javascript"> // 创建一个对象 myObject 以及三个属性 sitename, siteurl, sitecontent. var myObject =

  • JS获得一个对象的所有属性和方法实例

    今天遇到一个比较棘手的问题,需要了解一个JS对象的所有属性和方法,在网上发现这段代码,帮我解决了问题,记录下来,核心代码和原理如下: function displayProp(obj){ var names=""; for(var name in obj){ names+=name+": "+obj[name]+", "; } alert(names); } 以上这篇JS获得一个对象的所有属性和方法实例就是小编分享给大家的全部内容了,希望能给大家

  • js利用for in循环获取 一个对象的所有属性以及值的实例

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

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

    今天优化项目时,遇到了关于"遍历js中对象的属性和值"的需求.之所以会有这个需求,是因为要做一个局部刷新表格内容的js插件.刚开始我去网上荡了一个js分页插件,但是智商实在捉急,搞了半天没搞出来!后来就怒了,干脆自己写一个好了.结果就遇到了这个问题! 问题:通过遍历属性名数组,获取对象的属性值失败 刚开始的错误代码如下: for(var i=0;i<dataList.length;i++) { var dataLine="<tr>"; for(va

  • JS实现查找数组中对象的属性值是否存在示例

    JS实现查找数组中对象的属性值是否存在示例

    本文实例讲述了JS实现查找数组中对象的属性值是否存在.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var studentsArray = [ { "

  • jquery动态遍历Json对象的属性和值的方法

    1.遍历 json 对象的属性 //定义json对象 var person= { name: 'zhangsan', pass: '123', fn: function(){ alert(this.name+"的密码="+this.pass); } } //遍历person属性包括方法,如果不想显示出方法,可用typeof(person[item])== "function"来判断 for(var item in person){ alert("perso

  • 关于JS中match() 和 exec() 返回值和属性的测试

    关于JS中match() 和 exec() 返回值和属性的测试

    语法: exec() : RegExpObject.exec(string) match() : stringObject.match(string) stringObject.match(regexp) 知识点: exec() 是RegExp对象的方法,而 match() 是String对象的方法. 都会返回包含第一个匹配项信息的数组:或者在没有匹配项的情况下返回null. 返回的数组虽然是Array 的实例,但包含两个额外的属性:index 和 input.其中,index 表示匹配项在字符

  • JS动态给对象添加属性和值的实现方法

    如下所示: var obj={}; for(var i=0;i<10;i++){ eval("obj.p"+i+"="+i); } 以上就是小编为大家带来的JS动态给对象添加属性和值的实现方法全部内容了,希望大家多多支持我们~

  • 浅谈js中对象的使用

    简单记录javascript中对象的使用 一.创建对象 //创建一个空对象 var o={}; //创建一个含有两个属性的对象,x.y var o2={x:12,y:'12',name:'JS'}; //此对象中的author属性的值还是一个对象 var o3={x:12,author:{name:'JS',age:23,address:'china'}}; //创建一个空对象和{}一样 var o4=new Object(); //给对象增加name属性 o4.name='JS' 上面使用了两

  • 详解JS中的attribute属性

    Attribute是属性的意思,文章仅对部分兼容IE和FF的Attribute相关的介绍. attributes:获取一个属性作为对象getAttribute:获取某一个属性的值 object.getAttributes(attribute) getAttribute方法不属于document对象,所以不能通过document对象获取,只能通过元素节点的调用.例如document.getElementsByTagName("p")[0]. getAttributes("tit

  • JS声明对象时属性名加引号与不加引号的问题及解决方法

    一般情况下属性名加引号和不加引号是都可以的,效果是一样的. var obj = { name : '你好', 'age' : 1, }; document.write( obj['name'] + '<br />' ); document.write( obj.age); 上面两行代码均可以正确执行. 当且仅当你的属性名是非法怪异的名字时候,会报错. var obj = { 333 : '这个会报错' }; document.write( obj.333); 此时报错. var obj = {

  • js中hasOwnProperty的属性及实例用法详解

    1.js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果. 2.当检查对象上某个属性是否存在时,hasOwnProperty 是唯一可用的方法. 实例 var foo = { hasOwnProperty: function() { return false; }, bar: 'Here be dragons' }; foo.hasOwnProperty('bar'); // 总是返回 false

随机推荐