【前端教程】JavaScript 数组对象遍历与数据展示实战
在前端开发中，处理数组和对象是日常工作的基础。无论是篇文章将通过一个具体案例，详细讲解如何使用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样式提升页面美观度
- 代码组织应注重可读性和可维护性
掌握这些基础技能，将为你处理更复杂的前端数据展示需求打下坚实基础。