JavaScript合并数组并累加数量：购物清单生成器问题求助

核心思路是先通过Map数据结构聚合相同配料的数量，再基于聚合后的数据生成HTML，从根源上避免重复项出现。

修改后的完整代码 #

function loadData(savedData) {
    // 用Map存储聚合后的配料，键为「名称-容量」确保同规格配料唯一
    const ingredientsMap = new Map();

    // 第一步：遍历选中的鸡尾酒，累加同规格配料的数量
    savedData.cocktailsList.forEach(item => {
        if (item.isChecked) {
            item.ingredients.forEach(ingred => {
                const uniqueKey = `${ingred.name}-${ingred.capacity}`;
                if (ingredientsMap.has(uniqueKey)) {
                    // 已存在则累加数量
                    const existing = ingredientsMap.get(uniqueKey);
                    existing.qty += ingred.selectedQty;
                } else {
                    // 不存在则初始化配料数据
                    ingredientsMap.set(uniqueKey, {
                        name: ingred.name,
                        capacity: ingred.capacity,
                        qty: ingred.selectedQty
                    });
                }
            });
        }
    });

    // 第二步：基于聚合数据生成最终HTML
    let selectedCocktailsHTML = ``;
    ingredientsMap.forEach(ingred => {
        selectedCocktailsHTML += `<p class="review-screen-ingred-name">${ingred.name} - ${ingred.qty} bottles ${ingred.capacity}</p>`;
    });

    return selectedCocktailsHTML;
}

方案说明 #

1. 唯一性保证：用名称+容量作为Map的键，避免把不同容量的同名称配料错误合并（比如750ml和1L的伏特加会被视为两个独立项）。如果你的配料有专属ID，用ID作为键会更精准。
2. 效率优势：遍历所有配料仅需一次，时间复杂度为O(n)（n为选中配料的总数量），属于最优效率方案。
3. 扩展性：后续如果需要添加配料品牌、单位转换等需求，只需修改Map的键或存储结构即可快速适配。

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