在前端開發中，處理數組和對象是日常工作的基礎。無論是篇文章將通過一個具體案例，詳細講解如何使用JavaScript遍歷包含對象的數組，并將數據以清晰的格式展示在頁面上。我們會從基礎語法開始，逐步優化代碼，最終實現一個既美觀又實用的數據展示效果。
案例需求分析
我們需要處理一個包含人員信息的數組，每個元素都是一個包含bianhao(編號)、name(姓名)和age(年齡)屬性的對象：
var personShuZu = [{'bianhao':007,'name':'詩書畫唱1','age':20},{'bianhao':666,'name':'詩書畫唱2','age':21},{'bianhao':233,'name':'詩書畫唱3','age':22},
];
目標是將這些數據以結構化的方式展示在頁面上，替代僅要顯示數據，還要保證格式清晰、易于閱讀。
基礎實現：使用for…of和for…in遍歷
首先，我們來分析原始代碼的實現思路，它使用了兩種不同的循環方式來處理數據：
for...of：用于遍歷數組元素（遍歷數組的具體內容或值）for...in：用于遍歷對象屬性（遍歷對象的屬性名）
原始代碼解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>人員信息展示</title>
<script>
var personShuZu=[{'bianhao':007,'name':'詩書畫唱1','age':20},{'bianhao':666,'name':'詩書畫唱2','age':21},{'bianhao':233,'name':'詩書畫唱3','age':22},
];// 使用for...of遍歷數組中的每個對象
for(var i of personShuZu){// 使用for...in遍歷對象的每個屬性for(var j in i){// 輸出屬性值，并用 分隔document.write(i[j]+" ");}// 每個對象的數據顯示完后換行document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>
這段代碼的執行流程是：
- 外層
for...of循環逐個取出數組中的人員對象 - 內層
for...in循環遍歷當前人員對象的所有屬性 - 使用
document.write()輸出屬性值，并用空格分隔 - 每個人員信息輸出完成后換行
存在的問題
雖然這段代碼能夠展示數據，但存在幾個明顯的不足：
- 使用
document.write()直接輸出，不利于頁面布局控制 - 沒有表頭，用戶無法直觀知道每個數值的含義
- 樣式簡陋，數據展示不夠清晰
- 編號007會被解析為7（數字前導零問題）
優化實現：結構化展示與樣式美化
讓我們對代碼進行全面優化，實現一個更專業的數據展示效果。
優化思路
- 使用DOM操作替代document.write()：更靈活地控制頁面元素
- 添加表頭：明確每個數據字段的含義
- 使用表格布局：使數據展示更規整
- 添加CSS樣式：提升視覺效果和可讀性
- 修復數字前導零問題：確保編號正確顯示
- 使用更現代的JavaScript語法：如
const/let替代var
優化后的完整代碼
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>人員信息表</title><style>/* 頁面基礎樣式 */body {font-family: 'Arial', sans-serif;margin: 20px;background-color: #f5f5f5;}/* 標題樣式 */.title {color: #333;text-align: center;margin-bottom: 20px;}/* 表格樣式 */.person-table {width: 100%;max-width: 600px;margin: 0 auto;border-collapse: collapse;background-color: white;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}/* 表頭樣式 */.person-table th {background-color: #4CAF50;color: white;padding: 12px 15px;text-align: left;}/* 表格單元格樣式 */.person-table td, .person-table th {border: 1px solid #ddd;padding: 12px 15px;}/* 表格行懸停效果 */.person-table tr:hover {background-color: #f8f8f8;}</style>
</head>
<body><h2 class="title">人員信息列表</h2><table class="person-table" id="personTable"><!-- 表格內容將通過JavaScript動態生成 --></table><script>// 人員數據（使用const聲明常量）const personShuZu = [{'bianhao': '007', 'name': '詩書畫唱1', 'age': 20}, // 編號改為字符串以保留前導零{'bianhao': '666', 'name': '詩書畫唱2', 'age': 21},{'bianhao': '233', 'name': '詩書畫唱3', 'age': 22},];// 獲取表格元素const table = document.getElementById('personTable');// 創建表頭行const headerRow = document.createElement('tr');// 定義表頭文本（與數據屬性對應）const headers = ['編號', '姓名', '年齡'];// 定義數據屬性名const properties = ['bianhao', 'name', 'age'];// 創建表頭單元格headers.forEach(headerText => {const th = document.createElement('th');th.textContent = headerText;headerRow.appendChild(th);});// 將表頭添加到表格table.appendChild(headerRow);// 遍歷人員數組，創建表格內容行personShuZu.forEach(person => {const row = document.createElement('tr');// 為每個屬性創建單元格properties.forEach(prop => {const td = document.createElement('td');td.textContent = person[prop];row.appendChild(td);});// 將行添加到表格table.appendChild(row);});</script>
</body>
</html>關鍵知識點解析
1. 數組與對象的遍歷方式
JavaScript提供了多種遍歷數組和對象的方法，各有適用場景：
-
for…of循環：適合遍歷數組元素，語法簡潔
for (const person of personShuZu) {// 處理每個人員對象 } -
for…in循環：適合遍歷對象的屬性
for (const key in person) {// 處理每個屬性console.log(key + ': ' + person[key]); } -
forEach方法：數組的內置方法，更現代的遍歷方式
personShuZu.forEach(person => {// 處理每個人員對象 });
2. DOM操作 vs document.write()
document.write()雖然簡單，但有明顯缺點：
- 會覆蓋整個文檔（如果在頁面加載完成后使用）
- 不利于代碼組織和維護
- 無法精確控制元素位置和樣式
推薦使用DOM操作方法：
document.createElement()：創建新元素element.appendChild()：添加子元素element.textContent：設置元素文本內容
3. 數據類型注意事項
原始代碼中編號007會被解析為數字7，因為JavaScript會自動忽略數字的前導零。解決方法：
- 將編號定義為字符串類型（如
'007'） - 如需數字類型，可在展示時格式化：
// 將數字格式化為3位，不足補零 function formatNumber(num) {return num.toString().padStart(3, '0'); }
拓展與實踐
基于這個案例，你可以嘗試以下拓展練習：
- 添加數據篩選功能：實現按年齡篩選人員的功能
- 添加排序功能：實現按編號或年齡排序
- 添加新增/刪除功能：允許動態添加或刪除人員信息
- 實現分頁：當數據量較大時，分頁展示數據
- 添加搜索功能：根據姓名模糊搜索人員
這些拓展將幫助你更深入地理解JavaScript數組操作、DOM manipulation和事件處理等核心前端技能。
總結
本文通過一個人員信息展示的案例，詳細講解了JavaScript中數組對象的遍歷方法和數據展示技巧。我們從基礎實現出發，逐步優化代碼，最終實現了一個既美觀又實用的數據展示頁面。
核心要點回顧：
- 選擇合適的遍歷方式處理數組和對象
- 優先使用DOM操作替代
document.write() - 注意數據類型對展示效果的影響
- 合理運用CSS樣式提升頁面美觀度
- 代碼組織應注重可讀性和可維護性
掌握這些基礎技能，將為你處理更復雜的前端數據展示需求打下堅實基礎。
