今天優(yōu)化項(xiàng)目時(shí)，遇到了關(guān)于”遍歷js中對(duì)象的屬性和值”的需求。之所以會(huì)有這個(gè)需求，是因?yàn)橐鲆粋€(gè)局部刷新表格內(nèi)容的js插件。剛開(kāi)始我去網(wǎng)上蕩了一個(gè)js分頁(yè)插件，但是智商實(shí)在捉急，搞了半天沒(méi)搞出來(lái)！后來(lái)就怒了，干脆自己寫(xiě)一個(gè)好了。結(jié)果就遇到了這個(gè)問(wèn)題！

問(wèn)題：通過(guò)遍歷屬性名數(shù)組，獲取對(duì)象的屬性值失敗

剛開(kāi)始的錯(cuò)誤代碼如下：

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

首先說(shuō)一下，dataList里面放的是對(duì)象數(shù)組；filedList里面放的是對(duì)象的屬性字段名數(shù)組。剛開(kāi)始是這樣想的，遍歷dataList，每次都可以拿到一個(gè)對(duì)象，然后嵌套for循環(huán)，遍歷filedList，每次拿到它的一個(gè)屬性值，然后拼湊成表格。

比如：dataList[0]就是一個(gè)Emp對(duì)象,而Emp里面有id,name等屬性。平常我們就可以通過(guò)dataList[0].id得到當(dāng)前Emp對(duì)象的id值。但是如果遍歷屬性字段數(shù)組的話,就不能通過(guò)這種方式dataList[0].filedList[0]。這并不是說(shuō)filedList[0]里面沒(méi)有獲取到值，因?yàn)槲彝ㄟ^(guò)alert(filedList[0])已經(jīng)得到了這個(gè)id值為1。那么為什么獲取失敗呢？因?yàn)樗侨フ褽mp對(duì)象里面的一個(gè)叫做filedList[0]的屬性了！Emp對(duì)象里面當(dāng)然沒(méi)有這個(gè)屬性了，所以就理所應(yīng)當(dāng)?shù)墨@取失敗了，那么我們又該如何獲取對(duì)象的屬性值呢？

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

解決方案：用“加強(qiáng)for循環(huán)”去遍歷

正確代碼如下：

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]是一個(gè)對(duì)象，那么我每次就可以拿到這個(gè)對(duì)象的屬性名，然后通過(guò)dataList[i][filedName],即對(duì)象[屬性名]的方式得到這個(gè)屬性的屬性值。

參考：JS獲得一個(gè)對(duì)象的所有屬性和方法

function displayProp(obj){  
  var names="";    
  for(var name in obj){    
    names+=name+": "+obj[name]+", "; 
  } 
  alert(names); 
} 

由此看來(lái)，js的功能還是很強(qiáng)大的！

以上這篇遍歷js中對(duì)象的屬性和值的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論