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