JavaScript购物车商品处理：存在则更新数量，不存在则添加

你的这段代码逻辑完全没问题，确实能实现「存在商品则更新数量，不存在则添加」的需求👍不过它有个小瑕疵：forEach会遍历完整个items数组，哪怕中途已经找到目标商品了，当购物车商品较多时会有点不必要的性能浪费。下面给你几种更高效、更简洁的实现方式：

方案1：用findIndex快速定位目标商品 #

findIndex会在找到匹配项后立即停止遍历，返回对应的索引，找不到则返回-1，相比forEach更高效：

const item = {id: this.id, name: this.name, price: this.price, amount: this.amount};
const targetIndex = this.cart.items.findIndex(element => element.id === item.id);

if (targetIndex !== -1) {
  // 存在则更新数量
  this.cart.items[targetIndex].amount += item.amount;
} else {
  // 不存在则添加新商品
  this.cart.items.push(item);
}

方案2：用find直接获取目标商品对象 #

如果更看重代码的可读性，find是个不错的选择，它会直接返回匹配的商品对象（找不到则返回undefined）：

const item = {id: this.id, name: this.name, price: this.price, amount: this.amount};
const existingItem = this.cart.items.find(element => element.id === item.id);

if (existingItem) {
  existingItem.amount += item.amount;
} else {
  this.cart.items.push(item);
}

方案3：用Map结构优化高频查询场景 #

如果你的购物车需要频繁执行「查找-更新/添加」操作，把items数组转换成Map（以商品id作为键）能让查询效率从O(n)降到O(1)，性能提升非常明显：

// 可以在购物车初始化时一次性把数组转成Map
const itemsMap = new Map(this.cart.items.map(item => [item.id, item]));

const newItem = {id: this.id, name: this.name, price: this.price, amount: this.amount};
const existingItem = itemsMap.get(newItem.id);

if (existingItem) {
  existingItem.amount += newItem.amount;
} else {
  itemsMap.set(newItem.id, newItem);
  // 如果需要保持原数组结构，再把Map转回数组
  this.cart.items = Array.from(itemsMap.values());
}

你可以根据实际场景选择合适的方案：如果购物车商品数量不多，方案1或2就足够好用；如果是高频操作或商品数量较大，方案3的性能优势会更突出。

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