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

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

Jul 21, 2017 pm 01:07 PM
javascript 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],即物件[屬性名]的方式得到這個屬性的屬性值。


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

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

簡易JavaScript教學:取得HTTP狀態碼的方法

js和vue的關係 js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

如何在JavaScript中取得HTTP狀態碼的簡單方法

CSS中bottom屬性語法 CSS中bottom屬性語法 Feb 21, 2024 pm 03:30 PM

CSS中bottom屬性語法

爐石戰記絕望線縷屬性介紹 爐石戰記絕望線縷屬性介紹 Mar 20, 2024 pm 10:36 PM

爐石戰記絕望線縷屬性介紹

JS 的 AI 時代來了! JS 的 AI 時代來了! Apr 08, 2024 am 09:10 AM

JS 的 AI 時代來了!

See all articles