javascript - 增加对象数量而不是在数组中创建新对象

Question

第一次使用购物车组件，我的代码结构如下..

let cartCount = document.getElementById("counter");
let isItemSelected = false;
let itemCount = 0;
let shoppingCart = [];
let selectedSize = "";
let displaySelectedSize = document.getElementById("selected");
let displayCart = document.getElementById("cart");



selectItem = () => {  
  isItemSelected = true;
  selectedSize = event.srcElement.id;
  displaySelectedSize.innerHTML = `${selectedSize}`;
}

addItem = () => {
  if (isItemSelected === true) {

    const shopItem = {
      name: "Classic Tee",
      price: 75,
      size: `${selectedSize}`,
      quantity: 0
    }

    itemCount+= 1;
    cartCount.innerHTML = `( ${itemCount} )`;    
    shopItem.quantity++
    shoppingCart.push(shopItem);
    console.log(shoppingCart);

    return itemSuccess();
  } else {
      return itemError();
  }
}

我基本上需要的是，如果我有所选尺寸的倍数，则 shopItem.quantity 会增加。

此刻我明白了..

// Output
0: {name: "Classic Tee", price: 75, size: "small", quantity: 1}
1: {name: "Classic Tee", price: 75, size: "small", quantity: 1}

// Desired Output
0: {name: "Classic Tee", price: 75, size: "small", quantity: 2}

我可以明白为什么我的输出是这样的，每次触发我的 addItem 函数时它都会创建一个新对象，但如果有重复项，我想改变我的 shopItem.quantity...

我该怎么做？

Answer 1

你可以给项目时间一个身份属性(我不会按名称，因为你可能有同名的东西，那会很糟糕)，例如id和你可以在添加内容之前搜索它。例如，考虑以下项目:

const cartItem = {id: 1, name: "Classic Tee"}

然后在添加商品之前，您可以在购物车中查找它:

const existingItem = shoppingCart.find((item) => {
  return cartItem.id === item.id;
});

if(existingItem) {
   existingItem.quantity++;
} else {
  // Push the item into the cart
  shoppingCart.push(cartItem);
}