Javascript 防止从购物车中移除重复产品

我目前正在为我的投资组合构建一个电子商务商店应用程序，我的情况如下

用户选择一个项目并将其添加到购物车，然后再次将相同的项目添加到购物车。现在，当他们想要删除一个项目时，所有相同的项目都将被删除。我目前正在使用filter方法，显然filter方法正在发挥作用

谁能告诉我如何从购物车中删除一个产品，而不删除所有类型的产品

谢谢你抽出时间

这是我要筛选的数组的示例

selectedProducts = [
{
  id: 12,
  sku: 12064273040195392,
  title: "Cat Tee Black T-Shirt",
  availableSizes: ["XS", "S"],
  style: "Black with custom print",
  price: 10.9,
  imgUrl: photo1,
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
},
{
  id: 13,
  sku: 51498472915966370,
  title: "Dark Thug Blue-Navy T-Shirt",
  availableSizes: ["M"],
  style: "Front print and paisley print",
  price: 29.45,
  imgUrl: photo2,
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
},
{
  id: 12,
  sku: 12064273040195392,
  title: "Cat Tee Black T-Shirt",
  availableSizes: ["XS", "S"],
  style: "Black with custom print",
  price: 10.9,
  imgUrl: photo1,
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
} ];

---

可能您可以找到数组中第一个项的索引，并根据索引从数组中删除该项。例如：

var selectedProducts = [
{
  id: 12,
  sku: 12064273040195392,
  title: "Cat Tee Black T-Shirt",
  availableSizes: ["XS", "S"],
  style: "Black with custom print",
  price: 10.9,
  imgUrl: 'photo1',
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
},
{
  id: 13,
  sku: 51498472915966370,
  title: "Dark Thug Blue-Navy T-Shirt",
  availableSizes: ["M"],
  style: "Front print and paisley print",
  price: 29.45,
  imgUrl: 'photo2',
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
},
{
  id: 12,
  sku: 12064273040195392,
  title: "Cat Tee Black T-Shirt",
  availableSizes: ["XS", "S"],
  style: "Black with custom print",
  price: 10.9,
  imgUrl: 'photo1',
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
} ];


const index = selectedProducts.findIndex(obj => obj.id == 12);
selectedProducts.splice(index, 1);
console.log(selectedProducts);

---

可能您可以找到数组中第一个项的索引，并根据索引从数组中删除该项。例如：

var selectedProducts = [
{
  id: 12,
  sku: 12064273040195392,
  title: "Cat Tee Black T-Shirt",
  availableSizes: ["XS", "S"],
  style: "Black with custom print",
  price: 10.9,
  imgUrl: 'photo1',
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
},
{
  id: 13,
  sku: 51498472915966370,
  title: "Dark Thug Blue-Navy T-Shirt",
  availableSizes: ["M"],
  style: "Front print and paisley print",
  price: 29.45,
  imgUrl: 'photo2',
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
},
{
  id: 12,
  sku: 12064273040195392,
  title: "Cat Tee Black T-Shirt",
  availableSizes: ["XS", "S"],
  style: "Black with custom print",
  price: 10.9,
  imgUrl: 'photo1',
  currencyId: "GBP",
  currencyFormat: "£",
  isFreeShipping: true
} ];


const index = selectedProducts.findIndex(obj => obj.id == 12);
selectedProducts.splice(index, 1);
console.log(selectedProducts);

---

在尝试过滤多个项目时，可以使用

Array.prototype.reduce

这将返回一个对象，其中每个选定项都有一个数组。数组的长度将是每个

id

的项数

let items = selectedProducts.reduce((a,v) => {
  a[v.id] ?  a[v.id].push(v) : a[v.id] = [v];
  return a;
}, {});

---

更紧凑的版本：

让选择的产品=[
{
id:12，
库存单位：12064273040195392，
标题：“猫T恤黑色T恤”，
可用性设置：[“XS”，“S”]，
风格：“定制印花黑色”，
价格：10.9，
图片：“照片1”，
货币ID：“英镑”，
货币格式：“£”，
这是真的吗
},
{
id:13，
sku:51498472915966370，
标题：“深恶棍蓝海军蓝T恤”，
可用性：[“M”]，
风格：“正面印花和佩斯利印花”，
价格:29.45,，
图片：“照片2”，
货币ID：“英镑”，
货币格式：“£”，
这是真的吗
},
{
id:12，
库存单位：12064273040195392，
标题：“猫T恤黑色T恤”，
可用性设置：[“XS”，“S”]，
风格：“定制印花黑色”，
价格：10.9，
图片：“照片1”，
货币ID：“英镑”，
货币格式：“£”，
这是真的吗
} ];
让项目=所选产品。减少（（a，v）=>{
a[v.id]？a[v.id]。推送（v）：a[v.id]=[v]；
返回a；
}, {});
控制台日志（项目）

您可以使用

Array.prototype.reduce

在尝试

筛选出多个项目时

这将返回一个对象，其中每个选定项都有一个数组。数组的长度将是每个
id
的项数

let items = selectedProducts.reduce((a,v) => {
  a[v.id] ?  a[v.id].push(v) : a[v.id] = [v];
  return a;
}, {});


更紧凑的版本：


让选择的产品=[
{
id:12，
库存单位：12064273040195392，
标题：“猫T恤黑色T恤”，
可用性设置：[“XS”，“S”]，
风格：“定制印花黑色”，
价格：10.9，
图片：“照片1”，
货币ID：“英镑”，
货币格式：“£”，
这是真的吗
},
{
id:13，
sku:51498472915966370，
标题：“深恶棍蓝海军蓝T恤”，
可用性：[“M”]，
风格：“正面印花和佩斯利印花”，
价格:29.45,，
图片：“照片2”，
货币ID：“英镑”，
货币格式：“£”，
这是真的吗
},
{
id:12，
库存单位：12064273040195392，
标题：“猫T恤黑色T恤”，
可用性设置：[“XS”，“S”]，
风格：“定制印花黑色”，
价格：10.9，
图片：“照片1”，
货币ID：“英镑”，
货币格式：“£”，
这是真的吗
} ];
让项目=所选产品。减少（（a，v）=>{
a[v.id]？a[v.id]。推送（v）：a[v.id]=[v]；
返回a；
}, {});
控制台日志（项目）看起来您正试图删除数组中第一个出现的项。
我建议您使用indexOf和splice方法尝试类似的方法


功能从购物车中移除（sku）{
常量索引=选定产品的索引（sku）；
所选产品。拼接（索引，1）；
}
看起来您正试图删除数组中第一个出现的项。
我建议您使用indexOf和splice方法尝试类似的方法


功能从购物车中移除（sku）{
常量索引=选定产品的索引（sku）；
所选产品。拼接（索引，1）；
}
您需要为购物车中的每个商品提供唯一的标识符

例如，将“newItem”添加到卡中时：

newItem['uniqueItemId'] = {UniqueIdentifier};
selectedProducts.push(newItem);

这将允许您访问对象上的
uniqueItemId
，您现在可以通过此值进行过滤，以便仅删除所需的项目：

selectedProducts = selectedProducts.filter(item => item.uniqueItemId !== {UniqueIdentifier});

您需要购物车中每个项目的唯一标识符

例如，将“newItem”添加到卡中时：

newItem['uniqueItemId'] = {UniqueIdentifier};
selectedProducts.push(newItem);

这将允许您访问对象上的
uniqueItemId
，您现在可以通过此值进行过滤，以便仅删除所需的项目：

selectedProducts = selectedProducts.filter(item => item.uniqueItemId !== {UniqueIdentifier});

这里的答案略长，但它显示了我们如何分配一个唯一的购物车ID，然后在删除时使用该ID进行过滤

对于演示，购物车ID只是一个
Date.now（）
，它的值是毫秒，因此应该是唯一的

我们在添加到购物车期间分配唯一ID：
注意：我们复制产品

const addProductToCart = (id) => {
  let product = Object.assign({}, products.find(p => p.id == id));
  product.cartId = Date.now();**
  cart.push(product);
  renderCart();
};

现在，当您单击购物车中的项目（删除）时，我们称之为删除方法：
注意：我们使用购物车ID来引用商品，而不是产品ID

const removeFromCart = (cartId) => {
  cart = cart.filter(item => item.cartId != cartId);
  renderCart();
};

下面是一个工作片段，展示了工作原理


let产品=[
{
id:1，
名称：“产品一”
},
{
id:2，
名称：“产品二”
},
{
id:3，
名称：“产品三”
}
];
让购物车=[]；
const renderProduct=（product）=>`
${product.name}
`；
const renderCartItem=（cartItem）=>`
${cartItem.name}
`；
常量renderCart=（）=>{
document.querySelector（'.cart'）.innerHTML=cart.map（c=>renderCartItem（c））.join（''；
};
const addProductToCart=（id）=>{
让product=Object.assign（{}，products.find（p=>p.id==id））；
product.cartId=Date.now（）；
推车推（产品）；
renderCart（）；
};
const removeFromCart=（cartId）=>{
cart=cart.filter（item=>item.cartId！=cartId）；
renderCart（）；
}
document.addEventListener（'DOMContentLoaded'，（）=>{
document.querySelector（'.items'）.innerHTML=products.map（p=>renderProduct（p））.join（''；
});
docum