1. 程式人生 > >遍歷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],即物件[屬性名]的方式得到這個屬性的屬性值。