JS forEach循环修改数组实现商品库存累加功能异常求助

API 探路者

2026-8-30

修复方案

你的代码有4个核心问题导致逻辑不生效：

变量作用域错误：newArray和mainArray都声明在clicked函数内部，每次点击触发函数时两个数组都会被重新初始化，newArray永远是空数组，根本无法保存之前添加的商品记录
遍历逻辑完全错误：首次点击时newArray长度为0，forEach循环不会执行任何逻辑，永远走不到添加商品的分支；就算数组有值，现有逻辑只要遍历到id不匹配的项，就会去mainArray查找并插入商品，会导致重复插入多条相同记录
字段名写错：业务需要累加的是stock属性，代码里误写成了days属性
直接引用原对象：如果直接把mainArray里的对象push到newArray，后续修改stock时会直接改动mainArray里的原始商品数据，会污染源数据

正确实现代码如下：

// 数组移到函数外部持久化存储，避免每次点击被重置
const newArray = [];
const mainArray = [
  { id: 1, name: "Shoes", stock: 5, price: 10 },
  { id: 2, name: "Bag", stock: 10, price: 50 },
];

function clicked(inp) {
  // 先检查newArray里是否已有对应id的商品
  const existingItem = newArray.find(item => item.id === inp);
  if (existingItem) {
    // 存在则直接将stock加1
    existingItem.stock++;
    console.log(newArray);
    return;
  }
  // 不存在则从mainArray查找目标商品
  const targetItem = mainArray.find(item => item.id === inp);
  if (targetItem) {
    // 拷贝原商品对象，重置stock为1后加入newArray，避免修改原数组数据
    newArray.push({
      ...targetItem,
      stock: 1
    });
  }
  console.log(newArray);
}

HTML部分无需修改：

<button id="1" onClick="clicked(2)">Click me</button>

实现效果：

第一次点击：newArray新增id为2的商品，stock值为1
第二次点击：匹配到已有商品，stock累加为2
后续每次点击对应id的商品，stock都会逐次加1，完全符合你的业务需求

如果是在Vue项目中使用，只需要把newArray替换为组件内的响应式数据（选项式API放在data中，组合式API用ref/reactive声明）即可，核心逻辑完全一致。

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