Question

我正在尝试使用香草javascript和OOJS概念创建购物车。

let inventory = [
    { item: "apples", price: 19, qty: 50 },
    { item: "oranges", price: 20, qty: 40 },
    { item: "pineapples", price: 40, qty: 60 },
    { item: "lemons", price: 10.12, qty: 100 }
  ];
  
  function MyBasket(inventory) {
    this.totalItems = [];
  }
  
  MyBasket.prototype.addItems = function(item, price, qty) {
    this.totalItems.push({ item: item, price: price, qty: qty });
  };

  MyBasket.prototype.removeItems = function(item, price, qty) {
    let a =inventory.filter(e=>e.item==item);
    inventory.splice(inventory.indexOf(a),1);
    console.log(inventory)
  };

  MyBasket.prototype.updateInventory = function() {
    cart.totalItems.forEach(i => {
      const item = inventory.find(o => o.item === i.item);
      if (item) item.qty -= i.qty;
    });
  }
  
  MyBasket.prototype.cartItems = function() {
    return this.totalItems;
  };
  
  MyBasket.prototype.totalAmount = function() {
    return this.totalItems.reduce((acc, item) => {
      return acc + item.price * item.qty;
    }, 0);
  };
  
  var cart = new MyBasket();
  
  cart.addItems("apples", 19, 2);
  cart.addItems("oranges", 20, 3);
  cart.addItems("lemons", 5, 4);
  cart.updateInventory();
  console.log("updated inventory", inventory);

  cart.removeItems('lemons',10.12,100);
  console.log("cart items", cart.cartItems());

  console.log("total Amount", cart.totalAmount());

  cart.updateInventory();
  console.log("updated inventory", inventory);

上面是该应用程序的js代码。稍后，我将为其创建UI并使用eventListener，它将调用父类MyBasket（）。

我有一个updateInventory()，它基本上将cartItem与库存进行比较，然后从库存中减去该项目的相应数量。每当库存有任何变化时，此功能都应检查并提供更新的库存。例如，将商品添加到购物车中或从购物车中删除商品后。

updateInventory()的问题是：添加项目后运行updateInventory()时，它包含重复的值。它应该只包含更新的列表。

现在，如果我删除购物车中的某些物品，则应该更新库存。现在，当我运行updateInventory()时，它将再次减去数量。这会导致错误的库存信息。

Answer 1

将其设为array而不是set。在使用reduce和其他数组函数时，可以使用

再次将set转换为array

Array.from()

let inventory = [
    { item: "apples", price: 19, qty: 50 },
    { item: "oranges", price: 20, qty: 40 },
    { item: "pineapples", price: 40, qty: 60 },
    { item: "lemons", price: 10.12, qty: 100 }
  ];
  
  function MyBasket(inventory) {
    this.totalItems = new Set();
  }
  
  MyBasket.prototype.addItems = function(item, price, qty) {
    this.totalItems.add({ item: item, price: price, qty: qty });
  };

  MyBasket.prototype.removeItems = function(item, price, qty) {
    let a =inventory.filter(e=>e.item==item);
    inventory.splice(inventory.indexOf(a),1);
    console.log(inventory)
  };

  MyBasket.prototype.updateInventory = function() {
  this.totalItems=Array.from(cart.totalItems);
    cart.totalItems.forEach(i => {
      const item = inventory.find(o => o.item === i.item);
      if (item) item.qty -= i.qty;
    });
  }
  
  MyBasket.prototype.cartItems = function() {
    return this.totalItems;
  };
  
  MyBasket.prototype.totalAmount = function() {
   this.totalItems=Array.from(cart.totalItems);
    return this.totalItems.reduce((acc, item) => {
      return acc + item.price * item.qty;
    }, 0);
  };
  
  var cart = new MyBasket();
  
  cart.addItems("apples", 19, 2);
  cart.addItems("oranges", 20, 3);
  cart.addItems("lemons", 5, 4);
  cart.updateInventory();
  console.log("updated inventory", inventory);

  cart.removeItems('lemons',10.12,100);
  console.log("cart items", cart.cartItems());

  console.log("total Amount", cart.totalAmount());

  cart.updateInventory();
  console.log("updated inventory", inventory);

Javascript：如何防止重复的键值对添加到数组中？

1 个答案: