本文详解如何将具有相同 sku 的商品价格信息归类展示，通过先分组再遍历的方式，避免重复渲染与逻辑混乱，实现结构清晰、语义正确的 html 输出。
本文详解如何将具有相同 sku 的商品价格信息归类展示，通过先分组再遍历的方式，避免重复渲染与逻辑混乱，实现结构清晰、语义正确的 html 输出。
在实际开发中，当原始数据存在多个同 SKU 但不同规格（如不同“per”值和对应价格）的条目时，直接使用单层 for 循环逐项追加 HTML，会导致同一商品被重复输出多次——这显然不符合“每个 SKU 只显示一次标题，其下罗列所有价格选项”的业务需求。
正确做法是：先按 SKU 分组聚合数据，再对每组统一生成结构化 HTML。以下是完整、可直接运行的实现方案：
✅ 步骤一：按 SKU 分组数据
使用一个空对象 groupedData 作为哈希表，以 sku 为键，对应值为该 SKU 下所有商品对象组成的数组：
const groupedData = {};
for (let i = 0; i <blockquote><p>? 提示：使用 const/let 替代 var 更符合现代 JavaScript 最佳实践，避免变量提升与作用域问题。</p></blockquote><h3>✅ 步骤二：遍历分组，构建结构化 HTML</h3><p>对每个 SKU 分组，仅取首个条目的 sku 和 title 生成标题行；再遍历该组内所有条目，逐条拼接价格行：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/1903" title="ChatsNow"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d6f807a7a932.png" alt="ChatsNow" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/1903" title="ChatsNow" class="overflowclass">ChatsNow</a>
<p class="overflowclass">一款集成AI聊天、翻译和搜索辅助能力的浏览器扩展，可直接在浏览网页时调用AI处理文字和信息任务。</p>
</div>
<a rel="nofollow" href="/ai/1903" title="ChatsNow" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><pre class="brush:php;toolbar:false;">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 <b>${per}</b> — ¥${parseFloat(price).toFixed(2)}`;
}
$('#div_1').append(html);
}
}✅ 优化点说明：
- 使用 Object.prototype.hasOwnProperty.call() 替代 hasOwnProperty()，更健壮地规避原型链污染风险；
- 对价格做 parseFloat().toFixed(2) 格式化，确保货币显示规范（如 "1.5" → "1.50"）；
- 标题
内包裹 提升语义可访问性；
- 使用模板字符串（`）替代 + 拼接，提升可读性与维护性。
⚠️ 注意事项
- 勿在循环内重复调用 $("#div_1").append()：频繁 DOM 操作性能低下。推荐先拼接完整 HTML 字符串，最后一次性插入（如本例），或使用 DocumentFragment 进阶优化；
- jQuery 版本兼容性：示例基于 jQuery 3.7.1，若项目已迁移到原生 JS，可用 document.getElementById('div_1').insertAdjacentHTML('beforeend', html) 替代；
- 数据校验建议：生产环境应增加 arr?.length 和 products?.[0] 的空值判断，防止运行时错误。
该方案逻辑清晰、扩展性强，后续如需支持排序（如按 per 升序）、折叠展开、或添加“起订量”等字段，均可在分组后轻松增强，是处理同类聚合渲染场景的标准范式。
