本文讲解如何将具有相同 sku 的商品价格信息归类显示，避免重复渲染，通过先分组再遍历的方式，用原生 javascript 实现结构清晰、语义明确的商品价格列表。
本文讲解如何将具有相同 sku 的商品价格信息归类显示，避免重复渲染，通过先分组再遍历的方式，用原生 javascript 实现结构清晰、语义明确的商品价格列表。
在实际开发中，常遇到类似需求：原始数据中多个条目共享同一 SKU（如不同规格或包装单位），但希望在页面上以「一个 SKU 标题 + 多个价格选项」的形式聚合展示，而非逐条平铺。直接在 for 循环内嵌套 $.each（或 forEach）会导致每条数据都重复渲染全部价格，造成严重冗余——正如提问者在 JSFiddle 中观察到的“奇怪结果”。
正确的解法是两阶段处理：
- 按 SKU 分组：遍历原始数组，将相同 sku 的对象归入同一个子数组；
- 按组渲染：遍历分组后的对象（键为 SKU），为每个 SKU 生成标题，并在其下逐条追加对应的价格项。
以下是优化后的完整实现（兼容 jQuery，但分组逻辑使用原生 JS，更可靠且无需依赖）：
// 步骤1：按 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);
}
// 步骤2：遍历分组，生成 HTML 并插入
for (const sku in groupedData) {
if (Object.prototype.hasOwnProperty.call(groupedData, sku)) {
const products = groupedData[sku];
const first = products[0];
let html = `<p><strong>${first.sku}</strong> — ${first.title}</p>`;
// 为该 SKU 下所有价格项生成子条目
for (let j = 0; j < products.length; j++) {
const p = products[j];
html += `<p><b>${p.per}</b> × ${p.price}</p>`;
}
$('#div_1').append(html);
}
}✅ 关键注意事项：
- 使用 Object.prototype.hasOwnProperty.call(obj, key) 替代 obj.hasOwnProperty(key)，防止原型链污染导致误判；
- 分组时优先使用 const/let 替代 var，避免变量提升与作用域问题；
- 标题仅取每组首个元素的 title（因同 SKU 下标题一致），避免重复判断；
- 若需支持无 SKU 数据，建议提前过滤：arr.filter(item => item.sku)；
- 如需排序（如按 SKU 升序），可在第二步前对 Object.keys(groupedData) 排序：
Object.keys(groupedData).sort().forEach(sku => { /* 渲染逻辑 */ });
该方案时间复杂度为 O(n)，空间复杂度 O(n)，兼顾性能与可读性，是处理同类聚合展示任务的标准实践。
