更新数组中的对象并且它有效，但也添加了一个神秘的数组

Question

我正在尝试在我正在制作的个人项目上创建添加到购物车功能。购物车本身是一个包含一系列产品和小计的对象。它看起来像这样：let cart = {  products: [    { prodId: 1, quantity: 1, price: 6.99 },    { prodId: 2, quantity: 2, price: 4.99 },    { prodId: 3, quantity: 1, price: 15.99 },  ],  subTotal: 32.96,};我现在只对产品感兴趣，所以我 products = cart.products这样做了，我只是在处理这个：products = [  { prodId: 1, quantity: 1, price: 6.99 },  { prodId: 2, quantity: 2, price: 4.99 },  { prodId: 3, quantity: 1, price: 15.99 }];我有逻辑来检查产品是否已经在购物车中，所以我正在努力在用户点击购物车中已有商品的“添加到购物车”时增加数量。其逻辑如下所示：let productId = 3;let oldProduct = products.filter(p => p.prodId === productId);let index = products.indexOf(oldProduct);if (index > -1) {  products.slice(index, 1);}const updatedProduct = oldProduct.map(p => p.quantity++);products.push(updatedProduct);我打算为此做的是：从数组中取出现有产品并将其绑定到oldProduct完全使用将现有产品从阵列中移除slice通过将数量加 1map并将其绑定到来更新现有产品updatedProduct将这个更新的产品推到products这有效，但也添加了一个数组products。所以控制台中的输出如下所示：[  { prodId: 1, quantity: 1, price: 6.99 },  { prodId: 2, quantity: 2, price: 4.99 },  { prodId: 3, quantity: 2, price: 15.99 },  [ 1 ]]我知道数组是添加的数量。我可能应该提到，在浏览器中，每次您点击购物车中已存在的产品的按钮时，新数组都会添加产品，因此，如果您点击第 3 项的按钮 5 次，产品数组将如下所示:[  { prodId: 1, quantity: 1, price: 6.99 },  { prodId: 2, quantity: 2, price: 4.99 },  { prodId: 3, quantity: 6, price: 15.99 },  [ 1 ],  [ 2 ],  [ 3 ],  [ 4 ],  [ 5 ]]我觉得是有关系的updatedProduct，因为我登录的时候只是数组，但是如果只是数组，那么数量就上不去了，所以我真的很困惑。另外，当我检查typeOf它updatedProduct时说它是一个对象，所以我真的不知道发生了什么。任何帮助将不胜感激。

Answer 1

我认为你想得太多了，你也在用filter你的意思find，slice当你的意思splice。不过不用担心。我想你想要这样的东西：

let cart = {

  products: [

    { prodId: 1, quantity: 1, price: 6.99 },

    { prodId: 2, quantity: 2, price: 4.99 },

    { prodId: 3, quantity: 1, price: 15.99 },

  ],

  subTotal: 32.96,

};

let productId = 3;

cart.products.map(p => {

  if (p.prodId === productId) {

    p.quantity++;

    cart.subTotal += p.price;

  }

});

console.log(cart)

基本上，如果我理解的话，您只想增加具有给定 ID 的产品的数量。

我对其进行了进一步编辑并扩展了该功能，以将产品的价格也添加到小计中。没那么简单，但也许你需要/想要什么？

Answer 2

在你的情况下，

oldProduct.map(p => p.quantity++);

返回一个包含新数量的数组，然后将其推入products数组。

您想要获取具有更新数量的对象并将其推送。

还，

• 而不是使用.filterthen .indexOf，你可以使用.findIndex

• 我相信，鉴于您要尝试做的事情，您正在寻找.splice而不是.slice

let products = [

  { prodId: 1, quantity: 1, price: 6.99 },

  { prodId: 2, quantity: 2, price: 4.99 },

  { prodId: 3, quantity: 1, price: 15.99 }

];

let productId = 3;

let index = products.findIndex(p => p.prodId === productId); // findIndex

if (index > -1) {

  let oldProduct = products[index]

  products.splice(index, 1); // .splice

  oldProduct.quantity++;

  products.push(oldProduct); // push the object

}

console.log(products);