首頁  >  文章  >  web前端  >  javascript如何遍歷物件的屬性值程式碼詳解

javascript如何遍歷物件的屬性值程式碼詳解

伊谢尔伦
伊谢尔伦原創
2017-07-21 13:07:151713瀏覽

關於」遍歷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],即物件[屬性名]的方式得到這個屬性的屬性值。


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

以上是javascript如何遍歷物件的屬性值程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn