如何高效遍历HTML表格行，匹配服务器返回的data对象数组值？

问题翻译 #

我想要遍历HTML表格的行集合，将特定<td>的文本值与从服务器获取的data对象数组中的值进行匹配。目前用的是嵌套for循环，在89个数据对象和31行的情况下迭代次数太多，有没有更高效的实现方式？以下是我尝试的代码：

let dataArray;
let tableRows = table.tBodies[0].rows;

for (row of tableRows) {
  let val1 = row.cells[2].textContent;

  for (elem of dataArray) {
    let val2 = elem.c[3].v
    if (val1 === val2) {
     console.log(true)
  }
}
}

优化方案：用哈希结构降低时间复杂度 #

原来的嵌套循环时间复杂度是O(n*m)（n为表格行数，m为数据数组长度），总迭代次数达89×31=2759次。通过将数据数组转换为哈希表（Map或普通对象），可将查找操作降为O(1)，整体复杂度降至O(n+m)，总迭代次数仅为89+31=120次，效率大幅提升。

方式1：使用JavaScript Map

let dataArray;
let tableRows = table.tBodies[0].rows;

// 预存数据数组中的目标值到Map
const dataValueMap = new Map();
for (const elem of dataArray) {
  const val2 = elem.c[3].v;
  dataValueMap.set(val2, true); // value仅作匹配标记，可设任意值
}

// 遍历表格行直接查询Map
for (const row of tableRows) {
  const val1 = row.cells[2].textContent;
  if (dataValueMap.has(val1)) {
    console.log(true);
  }
}

方式2：使用普通对象（适用于值为字符串/数字等可作为对象键的类型）

let dataArray;
let tableRows = table.tBodies[0].rows;

// 预存数据数组中的目标值到对象
const dataValueObj = {};
for (const elem of dataArray) {
  const val2 = elem.c[3].v;
  dataValueObj[val2] = true;
}

// 遍历表格行直接查询对象
for (const row of tableRows) {
  const val1 = row.cells[2].textContent;
  if (dataValueObj[val1]) {
    console.log(true);
  }
}

额外优化细节 #

• 如果数据数组中存在重复值，可先用Set去重再构建哈希表，减少存储空间：

  const uniqueValues = new Set(dataArray.map(elem => elem.c[3].v));
  const dataValueMap = new Map([...uniqueValues].map(val => [val, true]));
  

• 注意<td>的textContent可能包含前后空格，必要时用trim()处理避免匹配失败：

  const val1 = row.cells[2].textContent.trim();
  

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