JavaScript函数内push操作无法更新空cart数组的问题排查

问题场景 #

学习JavaScript实现购物车功能时，需要实现逻辑：选择下拉菜单中存储在catalog数组的商品后，将选中项推入初始为空的cart数组。
使用的功能代码如下：

let addFCat = document.getElementById('addfromCat');

function cat_Cart(){ 
  // 获取选中的商品索引
  let e = document.getElementById("productList");
  let itemIndex = e.options[e.selectedIndex].value;
  console.log(itemIndex);

  // 把商品加入购物车
  cart.push(catalog[itemIndex]);
  localStorage.setItem("cart", JSON.stringify(cart));

  // 弹窗提示
  // alert(`You added ${cartItems.name} to your Cart`)
}

实际运行时cart数组始终为空，但在控制台手动执行cart.push(catalog[输入对应索引值])后查询cart.length，可以观察到cart正常更新，已通过console.log做基础运行状态检查。

核心原因&修复方案 #

按优先级逐一排查即可解决：

• 函数未绑定触发事件：你只获取了id为addfromCat的触发按钮（大概率是“加入购物车”按钮），但没有给它绑定点击事件，点击按钮时cat_Cart根本没有执行。补充绑定代码即可：

  // 放在函数声明后执行
  addFCat.addEventListener('click', cat_Cart);
  

  验证方式：在cat_Cart函数第一行加console.log('函数已触发')，点击按钮后如果控制台没输出这条日志，就是事件绑定缺失的问题。
• cart变量初始化错误：如果cart变量声明在函数内部，每次函数执行时都会重置为空数组；如果没做本地存储读取，页面刷新后也会回到空状态。正确的初始化要放在函数外的全局/模块作用域，优先读取本地已有数据：

  // 放在所有业务逻辑最前初始化
  let cart = JSON.parse(localStorage.getItem("cart")) || [];
  

• 索引类型不匹配：DOM元素的option.value默认是字符串类型，比如选中索引为1的选项，拿到的itemIndex是"1"而非数字1，如果catalog数组的索引校验逻辑对类型有要求，会出现取值失败。取值时做显式类型转换即可：

  let itemIndex = Number(e.options[e.selectedIndex].value);
  

• 下拉选项默认值无效：如果下拉菜单第一个选项是“请选择商品”类占位项，对应的value为空或非数组有效索引，catalog[itemIndex]会取到undefined，相当于往数组里推了空值。push前加一层校验即可：

  const selectItem = catalog[itemIndex];
  if (!selectItem) return; // 选中无效项时直接终止逻辑
  cart.push(selectItem);
  

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