本文详解如何将具有相同 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>`;
}
$('#div_1').append(html);
}
}✅ 优化点说明：
- 使用 Object.prototype.hasOwnProperty.call() 替代 hasOwnProperty()，更健壮地规避原型链污染风险；
- 对价格做 parseFloat().toFixed(2) 格式化，确保货币显示规范（如 "1.5" → "1.50"）；
- 标题 <p> 内包裹 <strong> 提升语义可访问性；
- 使用模板字符串（`）替代 + 拼接，提升可读性与维护性。
⚠️ 注意事项
- 勿在循环内重复调用 $("#div_1").append()：频繁 DOM 操作性能低下。推荐先拼接完整 HTML 字符串，最后一次性插入（如本例），或使用 DocumentFragment 进阶优化；
- jQuery 版本兼容性：示例基于 jQuery 3.7.1，若项目已迁移到原生 JS，可用 document.getElementById('div_1').insertAdjacentHTML('beforeend', html) 替代；
- 数据校验建议：生产环境应增加 arr?.length 和 products?.[0] 的空值判断，防止运行时错误。
该方案逻辑清晰、扩展性强，后续如需支持排序（如按 per 升序）、折叠展开、或添加“起订量”等字段，均可在分组后轻松增强，是处理同类聚合渲染场景的标准范式。
