如何限制JavaScript.filter结果

Question

我正在用JavaScript创建一个简单的购物车作为练习。当用户单击从购物车(数组(中删除一个项目时，我使用.filter按ID删除产品(对象(。但是，.filter当然会从数组中删除所有ID为x的对象。我相信实现我想要的目标的最好方法是从对象数组中最多删除一个具有所述ID的对象。有人知道如何做到这一点/更合适的解决方案吗？

JSFiddle：https://jsfiddle.net/LiamMacmillan/zryq62ua/79/

let thisItemId = $(this).parent().data("id");
shoppingCart = shoppingCart.filter(
item => item.id != thisItemId
);

Answer 1

使用findIndex和splice:

const index = shoppingCart.findIndex(item => item.id === thisItemId);
if (index > -1) {
shoppingCart.splice(index, 1);
}

---

不过，最好跟踪购物车中每件商品的计数，这将更容易向用户显示，并使这种情况更易于管理。

的一个例子

let shoppingCart = [
{ itemId: 1, count: 5 },
{ itemId: 2, count: 3 }
];
function decreaseCount(itemId) {
const shoppingCartItem = shoppingCart.find(x => x.itemId === itemId);
if (shoppingCartItem) {
if (--shoppingCartItem.count < 1) {
removeItem(itemId);
}
}
}
// slightly less efficient, but uses immutable objects, map, and filter
function decreaseCountImmutable(itemId) {
shoppingCart = 
shoppingCart
.map(x =>  x.itemId !== itemId ? x: ({ ...x, count: x.count -1 }))
.filter(x => x.count > 0);
}
function increaseCount(itemId) {
const shoppingCartItem = shoppingCart.find(x => x.itemId === itemId);
if (shoppingCartItem) {
shoppingCartItem.count++;
} else {
shoppingCart.push({ itemId, count: 1 });
}
}
// uses immutable objects and map
function increaseCountImmutable(itemId) {
let foundItem = false;
shoppingCart = shoppingCart.map(x =>  x.itemId !== itemId ? x: (foundItem = true) && ({ ...x, count: x.count + 1 }));
if (!foundItem) {
shoppingCart.push({ itemId, count: 1 });
} 
}
function removeItem(itemId) {
shoppingCart = shoppingCart.filter(x => x.itemId !== itemId);
}