JSON读取与表格生成算法优化咨询：代码改进及工具推荐

1. 代码中存在的错误 #

• 空JSON解析报错：const jsons = ""; 直接执行JSON.parse(jsons)会抛出语法错误，空字符串不是有效的JSON格式，需替换为实际数据或从正确数据源获取。
• 单元格类型混乱：createPartOfTable函数中，cell = document.createElement(cell.nodeName); 会复用传入单元格的标签名，导致表体行错误生成<th>标签，不符合HTML语义。
• 数据匹配依赖顺序：通过obj[i][Object.keys(obj[i])[j]]取值，完全依赖JSON字段与表头数组的顺序一致，一旦字段顺序变更，数据对应关系会出错，应直接用表头字段名作为键取值。
• 变量声明不规范：混用var、let、const，var存在变量提升问题，易引发意外错误。
• 空值处理缺失：当字段值为空或undefined时，document.createTextNode(textNode)会显示"undefined"，影响页面展示。
• 函数职责耦合：createPartOfTable同时处理表头和表体创建逻辑，耦合度高，不易维护。

2. 代码可读性优化 #

优化思路 #

• 拆分函数，让每个函数只负责单一职责（创建表头、创建表体行）
• 统一使用let/const声明变量，规避var的问题
• 直接通过表头字段名获取数据，摆脱对字段顺序的依赖
• 增加空值处理，提升页面友好性
• 使用forEach替代传统for循环，代码更简洁易读
• 提取常量，便于后续维护

优化后的代码 #

// 提取可配置常量
const TABLE_CAPTION = "test";
const API_LINK_PREFIX = "APIlink?number=";
const TABLE_HEADERS = ["number", "date", "warehouse", "packed", "base", "comment", "total"];

function generateTable() {
  // 替换为实际的JSON数据，此处用示例数据
  const jsonData = `[
    {"number": "000000001", "date": "2023-11-14T10:26:00", "warehouse": "test", "packed": "user", "base": "", "comment": "", "total": 1},
    {"number": "000000002", "date": "2023-11-14T10:26:00", "warehouse": "test", "packed": "user", "base": "", "comment": "test", "total": 1}
  ]`;
  const data = JSON.parse(jsonData);

  // 创建表格容器
  const table = document.createElement("table");
  table.className = "table";

  // 添加表格标题
  const caption = document.createElement("caption");
  caption.textContent = TABLE_CAPTION;
  table.appendChild(caption);

  // 生成表头并添加
  const tableHead = createTableHeader();
  table.appendChild(tableHead);

  // 生成表体并添加
  const tableBody = createTableBody(data);
  table.appendChild(tableBody);

  // 将表格挂载到页面
  document.body.appendChild(table);
}

// 专门创建表头的函数
function createTableHeader() {
  const thead = document.createElement("thead");
  const row = document.createElement("tr");

  TABLE_HEADERS.forEach(headerName => {
    const th = document.createElement("th");
    th.textContent = headerName;
    row.appendChild(th);
  });

  thead.appendChild(row);
  return thead;
}

// 专门创建表体的函数
function createTableBody(data) {
  const tbody = document.createElement("tbody");

  data.forEach(item => {
    const row = document.createElement("tr");

    TABLE_HEADERS.forEach(headerName => {
      const td = document.createElement("td");
      const value = item[headerName] || "-"; // 空值替换为短横线

      if (headerName === "number") {
        // 生成带API链接的单元格
        const link = document.createElement("a");
        link.href = `${API_LINK_PREFIX}${value}`;
        link.textContent = value;
        td.appendChild(link);
      } else {
        td.textContent = value;
      }

      row.appendChild(td);
    });

    tbody.appendChild(row);
  });

  return tbody;
}

// 页面加载完成后执行生成逻辑
window.onload = generateTable;

3. 适用的相关工具库 #

• Lodash：简化数据处理逻辑，比如空值判断、对象遍历，减少手写代码量。
• Tabulator：轻量级原生表格库，支持自定义单元格、排序、过滤、分页等功能，无需依赖框架。
• DataTables：功能丰富的老牌表格插件，支持搜索、分页、导出等扩展功能，文档完善。
• 框架生态组件：如果使用React/Vue，可选择对应生态的表格组件，比如Ant Design Table（React）、Element Plus Table（Vue），快速实现带样式和交互的复杂表格。

内容的提问来源于stack exchange，提问作者Maddream