我正在尝试使用香草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()
基本上将cartItems与库存进行比较,然后从库存中减去该项目的相应数量。每当库存有任何变化时,此功能都应检查并提供更新的库存。例如,在将项目添加到购物车之后或从购物车中删除项目之后。updateInventory()
的问题是:添加项目后运行updateInventory()
时,它包含重复的值。它应该只包含更新的列表。现在,如果我删除购物车中的某些物品,则应该更新库存。现在,当我运行
updateInventory()
时,它将再次减去数量。这会导致错误的库存信息。 最佳答案
代替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);