今天優化專案時,遇到了關於」遍歷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); }
function displayProp(obj){ var names=""; for(var name in obj){ names+=name+": "+obj[name]+", "; } alert(names); }
由此看來,js的功能還是很強大的!