如何按 SKU 分组并批量渲染商品价格列表

本文详解如何将具有相同 sku 的商品价格信息归类展示，通过先分组再遍历的方式，避免重复渲染与逻辑混乱，实现结构清晰、语义正确的 html 输出。

本文详解如何将具有相同 sku 的商品价格信息归类展示，通过先分组再遍历的方式，避免重复渲染与逻辑混乱，实现结构清晰、语义正确的 html 输出。

在实际开发中，当原始数据存在多个同 SKU 但不同规格（如不同“per”值和对应价格）的条目时，直接使用单层 for 循环逐项追加 HTML，会导致同一商品被重复输出多次——这显然不符合“每个 SKU 只显示一次标题，其下罗列所有价格选项”的业务需求。

正确做法是：先按 SKU 分组聚合数据，再对每组统一生成结构化 HTML。以下是完整、可直接运行的实现方案：

✅ 步骤一：按 SKU 分组数据

使用一个空对象 groupedData 作为哈希表，以 sku 为键，对应值为该 SKU 下所有商品对象组成的数组：

const groupedData = {};

for (let i = 0; i < arr.length; i++) {
  const item = arr[i];
  if (!groupedData[item.sku]) {
    groupedData[item.sku] = [];
  }
  groupedData[item.sku].push(item);
}

? 提示：使用 const/let 替代 var 更符合现代 JavaScript 最佳实践，避免变量提升与作用域问题。

✅ 步骤二：遍历分组，构建结构化 HTML

对每个 SKU 分组，仅取首个条目的 sku 和 title 生成标题行；再遍历该组内所有条目，逐条拼接价格行：

for (const sku in groupedData) {
  if (Object.prototype.hasOwnProperty.call(groupedData, sku)) {
    const products = groupedData[sku];
    const { sku: s, title } = products[0]; // 解构复用
    let html = `<p><strong>${s} - ${title}</strong></p>`;

    for (let j = 0; j < products.length; j++) {
      const { per, price } = products[j];
      html += `<p><b>${per}</b> — ¥${parseFloat(price).toFixed(2)}</p>`;
    }

    $('#p_1').append(html);
  }
}

✅ 优化点说明：

• 使用 Object.prototype.hasOwnProperty.call() 替代 hasOwnProperty()，更健壮地规避原型链污染风险；
• 对价格做 parseFloat().toFixed(2) 格式化，确保货币显示规范（如 “1.5” → “1.50”）；
• 标题 <p> 内包裹 <strong> 提升语义可访问性；
• 使用模板字符串（`）替代 + 拼接，提升可读性与维护性。

⚠️ 注意事项

• 勿在循环内重复调用 $(“#p_1”).append()：频繁 DOM 操作性能低下。推荐先拼接完整 HTML 字符串，最后一次性插入（如本例），或使用 DocumentFragment 进阶优化；
• jQuery 版本兼容性：示例基于 jQuery 3.7.1，若项目已迁移到原生 JS，可用 document.getElementById(‘p_1’).insertAdjacentHTML(‘beforeend’, html) 替代；
• 数据校验建议：生产环境应增加 arr?.length 和 products?.[0] 的空值判断，防止运行时错误。

该方案逻辑清晰、扩展性强，后续如需支持排序（如按 per 升序）、折叠展开、或添加“起订量”等字段，均可在分组后轻松增强，是处理同类聚合渲染场景的标准范式。