JavaScript遍历对象属性与值的正确方法

需求背景与问题描述

在优化项目过程中，需要实现遍历JavaScript对象属性及其值的功能。该需求源于开发一个用于局部刷新表格内容的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对象，该对象包含id、name等属性。通常情况下，可以通过dataList[0].id直接获取当前Emp对象的id值。然而，当遍历属性字段数组时，无法使用dataList[0].filedList[0]这种写法。这并非因为filedList[0]中没有获取到值（通过alert(filedList[0])可以确认获取到了id值为1），而是代码试图在Emp对象中寻找名为filedList[0]的属性，由于该属性不存在，导致获取失败。那么，如何正确获取对象的属性值呢？

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

解决方案与代码修正

解决方案：使用“增强for循环”（即for-in循环）进行遍历。

修正后的正确代码如下：

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); 
} 

由此可见，JavaScript的功能十分强大。

以上关于遍历JS中对象属性和值的实例分享完毕，希望能对大家有所帮助，也希望大家多多支持本站。