Question

概述：

我在一个页面（10种不同的产品）中有10个“添加到购物车”按钮，当用户点击“addToCart”按钮时，该项目应添加到数组 this.itemsInCart 如果数量设置为“1”时阵列上尚不存在;但是，如果该项目已经存在，则它应该仅增加该数组中该项目的数量。

问题：

将第二个产品添加到购物车（第二次）后出现问题，它会增加该产品的数量，但同时会创建同一个对象的新对象具有相同ID且数量为1。

当前代码：

  addToCart(itemDetails) {
if (this.itemsInCart.length == 0) {
  this.itemsInCart.push({
    itemId: itemDetails.objectId,
    itemName: itemDetails.dishName,
    itemPrice: itemDetails.price,
    qty: 1,
  })
} else {
  this.itemsInCart.forEach(el => {
  if (el.itemId == itemDetails.objectId) {
      el.qty += 1;
      return;
    } else if (el.itemId != itemDetails.objectId) {
      this.itemsInCart.push({
        itemId: itemDetails.objectId,
        itemName: itemDetails.dishName,
        itemPrice: itemDetails.price,
        qty: 1,
      })
    }

  })
  }
 }

显示问题的生成数组：

        [
      {
        "itemId": "zMrEXUEx7U",
        "itemName": "Roller Menu",
        "itemPrice": 27.5,
        "qty": 2
      },
      {
        "itemId": "AD9cZs4R4A",
        "itemName": "Big Filler Smokey Menu",
        "itemPrice": 66,
        "qty": 2
      },
      {
        "itemId": "zMrEXUEx7U",
        "itemName": "Roller Menu",
        "itemPrice": 27.5,
        "qty": 1
      },
      {
        "itemId": "AD9cZs4R4A",
        "itemName": "Big Filler Smokey Menu",
        "itemPrice": 66,
        "qty": 1
      },
      {
        "itemId": "AD9cZs4R4A",
        "itemName": "Big Filler Smokey Menu",
        "itemPrice": 66,
        "qty": 1
      }
    ]

Answer 1

不要推入.forEach()。您需要设置一个标记（例如exists），默认设置为false，当您在.forEach回调中找到项时，会将此标记更新为true。

当flag false推送到数组时。

let flag = false;

this.itemsInCart.forEach(el => {
    if (el.itemId == itemDetails.objectId) {
        el.qty += 1;

        flag = true;

        return false;
    }
})

if (!flag) {
    this.itemsInCart.push({
        itemId: itemDetails.objectId,
        itemName: itemDetails.dishName,
        itemPrice: itemDetails.price,
        qty: 1
    });
}

Javascript - 仅当数组中的对象尚不存在时才推送它

1 个答案: