今天優化項目時，遇到了關于”遍歷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中對象的屬性和值的實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持VeVb武林網。