JavaScript统计表格唯一产品总数量的异常排查与优化建议

问题根源 #

原代码中getUniqueProductNames函数存在核心逻辑错误：统计产品数量时，内层循环错误使用了未去重的uniqueProductNames数组元素进行匹配，而非去重后的uniqueItems数组元素。当数据量增大时，重复的产品名会导致同一个产品的数量被多次累加，最终统计数值异常偏大。

错误代码片段：

if (uniqueProductNames[i] == requests[j].product) { // 此处应使用uniqueItems[i]
  quantity += parseInt(requests[j].quantity);
}

修复后的优化版本代码 #

以下代码修正了逻辑错误，同时通过更高效的统计方式提升性能，增强鲁棒性：

function updateTotalQuantityNumber() {
  let total = 0;
  jQuery(".quantity-number").each(function () {
    const num = parseInt(jQuery(this).text(), 10);
    total += isNaN(num) ? 0 : num; // 过滤无效数值，避免干扰统计
  });
  jQuery("#total-requests-number").text(total);
}

updateTotalQuantityNumber();

function getRequests() {
  const requests = [];
  jQuery("#requests-table tbody tr").each(function () {
    // 去除文本空白字符，避免因格式差异导致产品名匹配失败
    const product = jQuery(this).find(".product-name").text().trim();
    const quantityText = jQuery(this).find(".quantity-number").text().trim();
    const quantity = parseInt(quantityText, 10);
    
    // 仅保留有效数据行
    if (product && !isNaN(quantity)) {
      requests.push({ product, quantity });
    }
  });
  return requests;
}

function getUniqueProductNames() {
  const requests = getRequests();
  // 使用Map实现单次遍历统计，时间复杂度从O(n²)降至O(n)，大数据量下性能显著提升
  const productQuantityMap = new Map();
  
  requests.forEach(item => {
    const currentQty = productQuantityMap.get(item.product) || 0;
    productQuantityMap.set(item.product, currentQty + item.quantity);
  });

  // 转换为渲染所需的数组格式
  const uniqueProducts = Array.from(productQuantityMap.entries()).map(([product, quantity]) => ({
    product,
    quantity
  }));

  const resultContainer = jQuery("#result-total");
  resultContainer.empty();
  
  uniqueProducts.forEach(item => {
    const cardHtml = `
<div class="col">
  <div class="card card-body shadow">
    <div class="d-inline-flex align-items-center" style="min-height:128px">
      <div class="me-2">
        <div class="bg-light p-3 rounded-circle">
          <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor" class="bi bi-box" viewBox="0 0 16 16">
            <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
          </svg>
        </div>
      </div>
      <div>
        <span class="fw-bold display-5 mb-5" data-vanilla-counter="" data-start-at="0" data-end-at="${item.quantity}" data-time="1000" data-delay="60" data-format="{}">${item.quantity}</span>
        <p class="lead" editable="inline">${item.product}</p>
      </div>
    </div>
  </div>
</div>`;
    resultContainer.append(cardHtml);
  });
}

getUniqueProductNames();

优化细节说明 #

• 逻辑修正：彻底解决重复累加问题，确保统计结果准确。
• 性能提升：用Map替代嵌套循环，大数据量下统计效率大幅提升。
• 鲁棒性增强：增加空白字符处理、无效数据过滤，避免因文本格式问题导致的错误。
• 代码简化：使用ES6语法简化结构，可读性更强。
• 计数器适配：将data-end-at设置为实际统计数值，确保计数器插件正常工作。

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