高效获取表格每行td值并转为指定数组的纯JS方案

需求说明 #

需要将包含6列多行的表格数据整理为数组：数组索引对应表格行（tr）的序号，每个元素是该行单元格（td）文本值以逗号分隔的字符串，示例如下：

tableData(0) = "1, Hans, Testperson, Munich, Germany"
tableData(1) = "2, Petra, Testperson, Hamburg, Germany"

原实现代码 #

原代码可正常运行，但表格行数超过1000行时性能极差：

function getTableData() {
   var tableRows = document.querySelectorAll("#tableId tr");
   var data = []
   for (var j = 1; j < tableRows.length; j++) {
      var rowColumns = tableRows [j].querySelectorAll("td")
      var columnData = ""
      for (var k = 1; k < rowColumns.length; k++) {
         columnData = columnData + rowColumns[k].innerText
         if (k < rowColumns.length-1) {columnData = columnData + ","}
      }
      data.push(columnData)
   }
 }

性能问题分析 #

原代码的核心瓶颈：

• 嵌套循环中频繁用+拼接字符串，每次拼接都会生成新字符串，大量重复操作会占用过多内存与CPU资源
• 循环内重复调用querySelectorAll("td")，DOM查询属于高开销操作
• 字符串拼接的判断逻辑增加了额外的计算步骤

优化后的实现方案 #

方案1：利用表格原生属性减少DOM查询 #

表格元素自带rows和cells属性，可直接获取行与单元格，避免重复调用DOM查询API；同时用数组map+join替代循环拼接：

function getTableData() {
  const table = document.getElementById('tableId');
  if (!table) return [];
  
  const data = [];
  // 跳过表头行（对应原代码j=1的起始逻辑）
  for (let j = 1; j < table.rows.length; j++) {
    const row = table.rows[j];
    // 跳过每行第一个单元格，提取剩余单元格文本后用逗号拼接
    const cellTexts = Array.from(row.cells).slice(1).map(cell => cell.innerText);
    data.push(cellTexts.join(','));
  }
  return data;
}

方案2：批量提取单元格进一步降低DOM交互 #

如果表格行数极多，可一次性选择所有目标单元格，再按行拆分，最大化减少DOM访问次数：

function getTableData() {
  const table = document.getElementById('tableId');
  if (!table) return [];
  
  // 一次性选中所有非表头行、非首列的单元格
  const targetCells = table.querySelectorAll('#tableId tr:not(:first-child) td:not(:first-child)');
  const cellTexts = Array.from(targetCells).map(cell => cell.innerText);
  
  const colsPerRow = 5; // 原逻辑每行取5个单元格（6列-1）
  const data = [];
  // 按行拆分批量提取的文本数组
  for (let i = 0; i < cellTexts.length; i += colsPerRow) {
    data.push(cellTexts.slice(i, i + colsPerRow).join(','));
  }
  return data;
}

可选优化：用textContent替代innerText #

如果不需要考虑CSS样式影响的文本显示（如隐藏元素的文本），textContent的性能远高于innerText——因为innerText会触发重排并处理样式规则，而textContent仅读取原始文本：

// 将代码中的cell.innerText替换为cell.textContent即可
const cellTexts = Array.from(row.cells).slice(1).map(cell => cell.textContent);

优化效果说明 #

• 大幅减少DOM查询次数：利用表格原生属性或一次性选择目标单元格，避免循环内重复的DOM遍历
• 高效字符串处理：Array.join()是浏览器底层优化的方法，性能远高于多次+拼接字符串
• 降低内存开销：避免频繁创建临时字符串，数组操作的内存效率更优

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