JavaScript购物车点击减号按钮数量为1时删除商品的实现问题

你的代码存在4个核心问题导致删除逻辑失效：

• 语法错误：let = oldNumber = item.numberOfUnits 多写了一个等号，属于非法JS语法
• API使用错误：map用于生成和原数组等长的新数组，遍历过程中调用splice修改原数组会打乱遍历顺序；且splice第一个参数要求传入数组索引，直接传商品id无法定位到要删除的元素
• 执行逻辑冲突：触发删除判断时，map仍然会把原商品（数量为1）返回存入新数组，相当于删了又加回去
• 重复渲染：updateCart在map循环内、循环外重复调用，会触发不必要的视图重绘

直接替换为以下代码即可实现预期效果：

function changeNumber(action, id) {
  // 优先处理：点击减号且商品数量为1时，直接移除商品
  if (action === "meno") {
    const currentItem = cart.find(item => item.id === id);
    if (currentItem && currentItem.numberOfUnits === 1) {
      cart = cart.filter(item => item.id !== id);
      updateCart();
      return;
    }
  }

  // 处理普通的数量增减逻辑
  cart = cart.map(item => {
    if (item.id !== id) return item;
    let count = item.numberOfUnits;
    if (action === "meno" && count > 1) count--;
    if (action === "piu") count++;
    return { ...item, numberOfUnits: count };
  });

  updateCart();
}

改动说明 #

• 删除逻辑独立前置，匹配删除条件时用filter生成剔除目标商品的新数组，完成渲染后直接终止函数，不会再走后续数量更新逻辑
• 移除了遍历过程中多余的渲染调用，全流程仅在所有数据计算完成后触发一次视图更新
• 修正了原有语法错误，非目标商品直接返回原引用，减少不必要的对象创建
• 保留了你原有的操作标识命名（meno/piu），如果是拼写失误可自行替换，不影响逻辑运行

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