在前端开发中，处理数组和对象是日常工作的基础。无论是篇文章将通过一个具体案例，详细讲解如何使用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遍历

首先，我们来分析原始代码的实现思路，它使用了两种不同的循环方式来处理数据：

  1. for...of：用于遍历数组元素（遍历数组的具体内容或值）
  2. 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){
    // 输出属性值，并用&nbsp;分隔
    document.write(i[j]+"&nbsp;");
  }
  // 每个对象的数据显示完后换行
  document.write("<br>");
}
</script>
</head>
<body>
</body>
</html>

这段代码的执行流程是：

  • 外层for...of循环逐个取出数组中的人员对象
  • 内层for...in循环遍历当前人员对象的所有属性
  • 使用document.write()输出属性值，并用空格分隔
  • 每个人员信息输出完成后换行

存在的问题

虽然这段代码能够展示数据，但存在几个明显的不足：

  1. 使用document.write()直接输出，不利于页面布局控制
  2. 没有表头，用户无法直观知道每个数值的含义
  3. 样式简陋，数据展示不够清晰
  4. 编号007会被解析为7（数字前导零问题）

优化实现：结构化展示与样式美化

让我们对代码进行全面优化，实现一个更专业的数据展示效果。

优化思路

  1. 使用DOM操作替代document.write()：更灵活地控制页面元素
  2. 添加表头：明确每个数据字段的含义
  3. 使用表格布局：使数据展示更规整
  4. 添加CSS样式：提升视觉效果和可读性
  5. 修复数字前导零问题：确保编号正确显示
  6. 使用更现代的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');
}

拓展与实践

基于这个案例，你可以尝试以下拓展练习：

  1. 添加数据筛选功能：实现按年龄筛选人员的功能
  2. 添加排序功能：实现按编号或年龄排序
  3. 添加新增/删除功能：允许动态添加或删除人员信息
  4. 实现分页：当数据量较大时，分页展示数据
  5. 添加搜索功能：根据姓名模糊搜索人员

这些拓展将帮助你更深入地理解JavaScript数组操作、DOM manipulation和事件处理等核心前端技能。

总结

本文通过一个人员信息展示的案例，详细讲解了JavaScript中数组对象的遍历方法和数据展示技巧。我们从基础实现出发，逐步优化代码，最终实现了一个既美观又实用的数据展示页面。

核心要点回顾：

  • 选择合适的遍历方式处理数组和对象
  • 优先使用DOM操作替代document.write()
  • 注意数据类型对展示效果的影响
  • 合理运用CSS样式提升页面美观度
  • 代码组织应注重可读性和可维护性

掌握这些基础技能，将为你处理更复杂的前端数据展示需求打下坚实基础。

# 前端
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

程序员学 AI（八）：AI Agent 到底是什么？从回答问题到完成任务

avatar AI Agent技术社区
cover

22道AI Agent 工程师必会的面试题，别啥都不会就出去找工作

avatar AI Agent技术社区

写给 TypeScript 工程师的 OpenClaw.NET 上手指南：用你熟悉的 TS 思维，跑起一个生产级 AI Agent

读代码层：TS 和 C# 本来就是「远房亲戚」——asyncawait??、接口、泛型、严格空检查，你的心智模型几乎无缝平移。真正要适应的只有两件事：类型是具名而非结构化的（多一句显式声明），以及 NativeAOT 下的「禁反射」约束。写扩展层：你甚至可以不怎么碰 C#——Node.js 插件桥意味着你的 TypeScript 插件就是一等公民，而且能在生产 aot 车道跑。内核给你 .NET

avatar AI Agent技术社区