jQuery移除购物车项时仅条件判断中出现undefined错误排查

问题场景 #

我编写了jQuery函数removeItemFromCart，用于移除localStorage中已字符串化的购物车对象内的商品项。执行函数时，控制台能正常打印value.productId，但条件判断环节却抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'productId')。同文件内的updateCart函数使用类似逻辑却运行正常，本地存储中cart键的取值为：

[{"productId":2,"quantity":3},{"productId":6,"quantity":1},{"productId":5,"quantity":1}]

可能的原因 #

• 数组遍历+删除导致索引错位：如果用普通for索引循环遍历数组时直接用splice删除元素，会让后续元素的索引前移。当循环推进到原数组长度的位置时，会取到undefined，此时访问productId就会触发报错。而updateCart可能用了不修改原数组的遍历方式（比如forEach、filter），或者先复制数组再操作，避免了索引问题。
• 遍历方式错误：比如removeItemFromCart用了for...in遍历数组，这种方式会遍历到数组的非元素属性，导致某次循环的value为undefined；而updateCart用了正确的数组遍历方法（比如for索引循环、forEach）。
• 条件判断的逻辑范围问题：比如在循环外部错误引用了循环内的value变量，或者在循环结束后对未初始化的变量访问productId。

调试与解决方法 #

• 添加防御性判断：在访问value.productId前先检查value是否存在，避免报错的同时定位问题：

  if (value && value.productId === targetProductId) {
    // 删除逻辑
  }
  

• 打印遍历细节：在循环内部打印当前索引和value，观察哪次循环出现undefined：

  for (let i = 0; i < cart.length; i++) {
    const value = cart[i];
    console.log('索引:', i, '当前项:', value);
    // 原条件判断代码
  }
  

• 对比两个函数的逻辑差异：把updateCart和removeItemFromCart的遍历、数组修改代码放在一起对比。比如updateCart是否用了filter生成新数组，而removeItemFromCart直接修改原数组？如果是，换成安全的删除方式：
  倒序遍历删除：

  for (let i = cart.length - 1; i >= 0; i--) {
    if (cart[i].productId === targetProductId) {
      cart.splice(i, 1);
      break;
    }
  }
  

  或者用filter生成新数组：

  cart = cart.filter(item => item.productId !== targetProductId);
  

• 检查参数合法性：确认removeItemFromCart接收的目标productId类型是否正确（比如是否是数字而非字符串），避免因匹配失败导致后续代码意外访问不存在的元素。

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