如何在JavaScript/Next.js中向数组添加元素而不覆盖原有内容？

看起来你在实现购物车添加逻辑时遇到了几个常见的小问题，我帮你梳理下并给出修正方案：

原代码的核心问题 #

1. localCart 变量作用域问题：你只在会话为空时初始化了空数组，其他场景下localCart是未定义的，直接调用indexOf或push会报错。
2. 元素存在性判断逻辑错误：!localCart.indexOf(...)的写法反了——indexOf找不到元素时返回-1，!-1等于true，这会导致你错误地重复添加元素，而应该是当indexOf返回-1时才执行push。
3. 未持久化数组状态：你没有把更新后的数组存回localStorage，每次刷新或会话重新开始时，之前的元素都会丢失。

修正后的实现思路 #

1. 初始化数组时优先读取localStorage：每次进入逻辑时，先从localStorage读取已存储的购物车数组，没有的话再初始化为空数组。
2. 正确判断元素是否存在：用indexOf(newItemId) === -1来检查元素是否不在数组中。
3. 更新数组后同步到localStorage：每次添加新元素后，把数组转成JSON字符串存回localStorage（因为localStorage只能存储字符串类型）。
4. 简化会话判断逻辑：会话为空时只需要处理会话存储，不需要单独存单个ID到localStorage，统一用数组来管理。

修正后的代码 #

api.get('products?include=' + mainId, addOrViewCartConfig).then((response) => { 
  // 从localStorage读取已有购物车数组，无数据则初始化为空数组
  let localCart = JSON.parse(localStorage.getItem('cartItems')) || [];
  // 提取当前要添加的商品ID
  const newItemId = parseInt(response.data[0].id);

  // 处理会话为空的场景
  if (isEmpty(storedSession)) { 
    storeSession(newItemId); 
  }

  // 检查商品是否已在购物车中
  if (localCart.indexOf(newItemId) === -1) { 
    // 添加新元素到数组
    localCart.push(newItemId);
    // 将更新后的数组同步到localStorage
    localStorage.setItem('cartItems', JSON.stringify(localCart));
    // 执行购物车视图更新
    viewCart();
  } else { 
    alert('The item you are trying to add is already in your cart!');
    return false; 
  }
}).catch((error) => { 
  // 打印具体错误信息方便调试
  console.error('apiError:', error); 
});

额外优化建议 #

如果你的购物车商品数量较多，用indexOf判断元素存在性的效率会比较低，可以改用Set来存储ID，判断和添加操作更高效：

api.get('products?include=' + mainId, addOrViewCartConfig).then((response) => { 
  // 用Set存储购物车ID，读取时转成Set类型
  let localCartSet = new Set(JSON.parse(localStorage.getItem('cartItems')) || []);
  const newItemId = parseInt(response.data[0].id);

  if (isEmpty(storedSession)) { 
    storeSession(newItemId); 
  }

  if (!localCartSet.has(newItemId)) { 
    localCartSet.add(newItemId);
    // 转成数组后存回localStorage
    localStorage.setItem('cartItems', JSON.stringify([...localCartSet]));
    viewCart();
  } else { 
    alert('The item you are trying to add is already in your cart!');
    return false; 
  }
}).catch((error) => { 
  console.error('apiError:', error); 
});

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