如何解决JS购物车数组匹配始终显示‘未找到商品’问题？

核心问题分析 #

你的代码出现始终输出“Product Not Found!”的情况，主要有以下几个常见原因：

1. 类型不匹配导致全等判断失败 #

split()方法分割出来的所有元素都是字符串类型，但你用来对比的ProductID、Price可能是数字类型。JavaScript的===全等判断会同时检查值和类型，类型不一致时直接返回false：

• 例如购物车中的cartPrice是字符串"100"，如果Price是数字100，"100" === 100结果为false
• 同理cartProductID是字符串"1234567890"，如果ProductID是数字1234567890，也会匹配失败

2. 循环逻辑错误：每轮都输出结果，而非遍历完统一判断 #

当前代码每遍历一组商品就输出一次结果，若购物车中有多个商品，前面不匹配的项会先输出“未找到”，即使后面有匹配项，也会让你误以为整体没找到。而且如果没有任何匹配项，会多次输出“未找到”，不符合预期。

3. 变量值存在细微差异 #

需要确认SelectedColor、SelectedSize这些变量的值是否和购物车中的项完全一致：

• 比如颜色值是否带#号（购物车中是#000000，变量是否写成了000000）
• 尺寸的大小写是否一致（购物车是XL，变量是否写成了xl）

修复后的代码示例 #

var ShoppingCartArray = ShoppingCartValue.split(",");
var productFound = false; // 标记是否找到匹配商品
var matchedQuantity = 0;

for (var i = 0; i < ShoppingCartArray.length; i = i + 5) {
    var cartProductID = ShoppingCartArray[i];
    var cartColor = ShoppingCartArray[i + 1];
    var cartSize = ShoppingCartArray[i + 2];
    var cartQuantity = parseInt(ShoppingCartArray[i + 3]);
    var cartPrice = ShoppingCartArray[i + 4];

    console.log("Cart Product ID:", cartProductID);
    console.log("Cart Color:", cartColor);
    console.log("Cart Size:", cartSize);
    console.log("Cart Quantity:", cartQuantity);
    console.log("Cart Price:", cartPrice);

    // 处理类型匹配，将对比的变量转为字符串，或把购物车项转为对应类型
    if (
        cartProductID === String(ProductID) &&
        cartColor === SelectedColor &&
        cartSize === SelectedSize &&
        cartPrice === String(Price)
    ) {
        console.log("Product Found !");
        matchedQuantity = cartQuantity;
        console.log("Quantity:", matchedQuantity);
        productFound = true;
        break; // 找到匹配项后可跳出循环，无需继续遍历
    }
}

// 遍历完成后统一输出结果
if (!productFound) {
    console.log("Product Not Found !");
}

额外建议 #

• 可以在代码中添加调试日志，打印对比的变量值，确认是否一致：

  console.log("对比的ProductID:", ProductID, "类型:", typeof ProductID);
  console.log("购物车的ProductID:", cartProductID, "类型:", typeof cartProductID);
  

• 建议将购物车数据结构改为对象数组，可读性和维护性更强：

  // 转换为对象数组
  var cartItems = [];
  for (var i = 0; i < ShoppingCartArray.length; i += 5) {
      cartItems.push({
          productId: ShoppingCartArray[i],
          color: ShoppingCartArray[i+1],
          size: ShoppingCartArray[i+2],
          quantity: parseInt(ShoppingCartArray[i+3]),
          price: ShoppingCartArray[i+4]
      });
  }
  // 后续用数组方法查找更简洁
  var matchedItem = cartItems.find(item => 
      item.productId === String(ProductID) &&
      item.color === SelectedColor &&
      item.size === SelectedSize &&
      item.price === String(Price)
  );
  

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