JS for循环if/else判断失效：商品数量增量与新增同时触发如何解决

你的逻辑错误发生在for循环的分支判断设计上：你将新增商品的逻辑放在了循环内的else分支，只要遍历到任意一个不匹配的商品，就会直接触发新增操作，而不是等遍历完所有商品、确认完全没有匹配项后再执行新增。同时你在每次循环内重复写入localStorage，也会导致数据被多次异常修改。

调整判断逻辑，新增标记变量记录是否找到匹配商品，遍历完成后再统一执行新增/更新操作：

1. 初始化isExist标记为false，用于标记是否已经找到id、颜色完全匹配的商品
2. 遍历过程中仅判断是否匹配，匹配到就修改对应商品的数量，同时更新isExist为true
3. 遍历完成后，如果isExist仍为false，再执行新增商品操作
4. 最后统一写入一次localStorage即可，无需循环内重复操作

const addBasket = () => { 
  let bouton = document.getElementById(produitData._id); 
  bouton.addEventListener("click", () => { 
    let produitTableau = JSON.parse(localStorage.getItem("produit")) || [];
    let select = document.getElementById("vernis"); 
    const fusionProduitTeinte = Object.assign({}, produitData, { 
      teinte: select.value, 
      quantite: 1, 
    });
    // 新增匹配标记
    let isExist = false;
    // 遍历仅做匹配判断
    for (let i = 0; i < produitTableau.length; i++) { 
      if (produitTableau[i]._id == produitData._id && produitTableau[i].teinte == select.value) { 
        produitTableau[i].quantite++; 
        console.log("quantite ++");
        isExist = true;
        // 找到匹配项就可以跳出循环，不用继续遍历
        break;
      } 
    }
    // 遍历完没有匹配项再新增
    if (!isExist) {
      console.log("nouveau"); 
      produitTableau.push(fusionProduitTeinte);
    }
    // 统一存储到localStorage
    localStorage.setItem("produit", JSON.stringify(produitTableau));
    console.log(select.value); 
    console.log(produitTableau); 
  }); 
  return; 
};

修改后的逻辑严格符合你的预期：

• 遍历所有已存商品，只要找到id和颜色都匹配的商品，就直接累加数量
• 遍历完所有商品都没有匹配项，才会新增对应商品对象
• 仅操作一次localStorage，避免重复写入的性能损耗和数据异常

内容的提问来源于stack exchange，提问作者Gerald-Ferron