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

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。

当标志是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
    });
}