POS账单模块开发求助：商品数组对象数量更新异常问题

问题根源分析 #

你的代码存在以下核心问题，导致数量更新崩溃和逻辑错误：

• 错误使用map遍历：map的设计目的是转换数组元素，你却在遍历过程中直接修改原数组并执行添加操作，每次循环遇到不匹配的商品就触发else分支，导致同一商品被重复推入数组。
• splice返回值误用：splice返回的是被移除的元素数组，你将totalItems赋值为这个数组，会直接丢失其他商品的数据。
• 对象修改逻辑冗余：既直接修改原item的qty属性，又用扩展运算符创建新对象，逻辑重复且可能引发引用混乱。
• 无匹配时的逻辑错误：遍历数组时只要有一个商品不匹配就执行添加操作，导致数组快速膨胀且重复商品大量出现。

修复后的代码实现 #

// 商品对象属性示例
// {
//     img: '',
//     name: '',
//     price: 0,
//     qty: 1
// }

let totalItems = []

const sumTotalItems = (obj) => {
    // 通过商品名称查找已存在的商品索引
    const existingIndex = totalItems.findIndex(item => item.name === obj.name);

    if (existingIndex !== -1) {
        // 存在则更新数量，创建新对象避免修改原引用
        totalItems[existingIndex] = {
            ...totalItems[existingIndex],
            qty: totalItems[existingIndex].qty + 1
        };
    } else {
        // 不存在则添加新商品，确保qty初始值为1
        totalItems.push({ ...obj, qty: 1 });
    }

    console.log(totalItems);
}

代码逻辑说明 #

1. 精准定位已存在商品：使用findIndex快速查找同名商品的索引，比遍历整个数组判断更高效简洁。
2. 安全更新数量：找到商品后，通过扩展运算符创建新对象更新qty，避免直接修改原数组元素的引用，防止后续逻辑出现意外副作用。
3. 规范添加新商品：未找到商品时，复制传入的对象并强制设置qty为1，避免传入的商品对象本身qty值异常导致的问题。
4. 线性执行逻辑：整个函数逻辑清晰，无遍历过程中的分支添加操作，从根本上杜绝了重复添加商品的问题。

可选优化建议 #

如果商品有唯一标识（如SKU、id），建议用唯一标识替代name作为判断依据，避免因商品名称重复导致的逻辑错误。

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