合并重复商品并累加对应数量的前端实现问题

你的核心需求是将收到的重复商品对应的数量累加，并按照订单商品的顺序生成目标数组。当前代码的问题是把商品和数量混在了一维数组里，无法区分商品名和数量，导致合并时错误地把数量也当作字符串处理。我们可以通过以下步骤解决：

步骤1：将收到的商品与对应数量配对并累加 #

首先，我们需要把收到的商品数组和数量数组一一对应，然后用一个对象来存储每个商品的总数量：

// 获取并处理收到的商品和数量数组
var joinArr = $('#rechighlight').html();
var qtyArr = $('#qtyArray').html();
var items = joinArr.trim().split('<br>').filter(item => item.trim() !== ''); // 过滤空字符串
var qtys = qtyArr.trim().split('<br>').filter(qty => qty.trim() !== '').map(Number); // 转成数字类型

// 累加每个商品的数量
var itemQtyMap = {};
items.forEach((item, index) => {
  if (!itemQtyMap[item]) {
    itemQtyMap[item] = 0;
  }
  itemQtyMap[item] += qtys[index];
});

这段代码做了这些事：

• 用filter去掉拆分后可能出现的空字符串（比如<br>结尾导致的无效元素）
• 把数量转成数字类型，方便后续累加计算
• 遍历商品和数量，用对象itemQtyMap存储每个商品的总数量，最终会得到类似{ AAA: 5, BBB: 3, CCC: 2 }的映射结果

步骤2：按照订单商品的顺序生成目标数组 #

接下来，我们需要获取订单里的商品列表，按照这个固定顺序取出对应的总数量，生成和预期输出一致的数组：

// 获取订单商品列表
var orderItems = $('#orderhighlight').html().trim().split('<br>').filter(item => item.trim() !== '');

// 生成目标数组
var resultingArr = [];
orderItems.forEach(item => {
  resultingArr.push(item);
  resultingArr.push(String(itemQtyMap[item] || 0)); // 数量转成字符串，无对应数量时显示0
});

// 补充空元素匹配预期输出（可选，根据你的需求调整）
resultingArr.push('');
resultingArr.push('');

// 转成JSON字符串并输出
var stringArr = JSON.stringify(resultingArr);
document.getElementById("finArray").innerHTML = stringArr;

这段代码的作用：

• 读取订单里的商品顺序，保证输出数组的结构和订单完全对齐
• 把每个商品名和对应的总数量依次加入数组，将数量转成字符串匹配预期输出格式
• 最后补充两个空字符串，和你给出的预期输出["AAA","5","BBB","3","CCC","2","",""]完全一致

完整代码整合 #

把以上代码整合起来，替换你原来的脚本部分即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
  // 获取并处理收到的商品和数量数组
  var joinArr = $('#rechighlight').html();
  var qtyArr = $('#qtyArray').html();
  var items = joinArr.trim().split('<br>').filter(item => item.trim() !== '');
  var qtys = qtyArr.trim().split('<br>').filter(qty => qty.trim() !== '').map(Number);

  // 累加每个商品的数量
  var itemQtyMap = {};
  items.forEach((item, index) => {
    itemQtyMap[item] = (itemQtyMap[item] || 0) + qtys[index];
  });

  // 获取订单商品列表并生成目标数组
  var orderItems = $('#orderhighlight').html().trim().split('<br>').filter(item => item.trim() !== '');
  var resultingArr = [];
  orderItems.forEach(item => {
    resultingArr.push(item);
    resultingArr.push(String(itemQtyMap[item] || 0));
  });

  // 补充空元素匹配预期输出
  resultingArr.push('');
  resultingArr.push('');

  // 输出结果
  var stringArr = JSON.stringify(resultingArr);
  document.getElementById("finArray").innerHTML = stringArr;
});
</script>

为什么这个方法可行？ #

• 用对象映射明确区分商品名和数量，彻底避免了把数量当作商品名合并的错误
• 严格按照订单商品的顺序生成数组，保证输出结构符合预期
• 处理了空字符串和类型转换，规避了拆分<br>标签时可能出现的无效元素问题

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