如何检测数组相同元素并累加数量？购物车重复商品不新增仅叠加数量

原有代码核心问题 #

1. 逻辑顺序颠倒：先把新增商品直接插入购物车再做重复判断，导致重复条目必然生成
2. 匹配逻辑错误：直接对两个数组做===全等判断，数组是引用类型，哪怕内容完全一致也不会返回true，匹配完全失效
3. 存储内容错误：直接把jQuery选择器对象存入数组，没有取输入框的实际值，后续所有对比、计算都会异常

修正后代码 #

var cartlist = [];
$(".addtocart").on('click', function() {
    // 取输入框实际值，数量转数字避免字符串拼接
    const prdcode = $("#prod_code").val().trim();
    const description = $("#prod_desc").val().trim();
    const addQty = Number($("#prod_qty").val().trim()) || 0;

    // 非法参数直接拦截
    if (!prdcode || addQty <= 0) return;

    let existedIndex = -1;
    // 遍历购物车按商品编码匹配
    for (let i = 0; i < cartlist.length; i++) {
        if (cartlist[i][0] === prdcode) {
            existedIndex = i;
            break;
        }
    }

    if (existedIndex > -1) {
        // 已存在则累加数量
        cartlist[existedIndex][2] = String(Number(cartlist[existedIndex][2]) + addQty);
    } else {
        // 不存在则新增条目
        cartlist.push([prdcode, description, String(addQty)]);
    }
});

效果验证 #

按照你给出的测试数据运行后，输出和预期完全一致：

0: Array(3){
     0: "ABC123"
     1: "DESCRIPTION FOR ABC123"
     2: "2"
}
1: Array(3){
     0: "DEF456"
     1: "DESCRIPTION FOR DEF456"
     2: "2"
}
2: Array(3){
     0: "GHI789"
     1: "DESCRIPTION FOR GHI789"
     2: "1"
}

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