遍歷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裡面放的是物件

filedListre的屬性欄位名數組。剛開始是這樣想的，遍歷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的功能還是很強大的！

🎜🎜🎜