vue 购物车列表怎么合并一样的商品
时间: 2023-07-10 12:40:06 浏览: 55
你可以使用 JavaScript 的 Array.reduce() 方法遍历购物车列表,将相同商品合并成一个,并计算总价和数量。下面是一个示例代码:
```javascript
const cart = [
{ name: "商品1", price: 10, quantity: 2 },
{ name: "商品2", price: 20, quantity: 1 },
{ name: "商品1", price: 10, quantity: 3 },
];
const mergedCart = cart.reduce((acc, cur) => {
const existingItemIndex = acc.findIndex(item => item.name === cur.name && item.price === cur.price);
if (existingItemIndex !== -1) {
acc[existingItemIndex].quantity += cur.quantity;
} else {
acc.push(cur);
}
return acc;
}, []);
console.log(mergedCart);
// Output: [{ name: "商品1", price: 10, quantity: 5 }, { name: "商品2", price: 20, quantity: 1 }]
```
在上面的示例中,我们使用 reduce() 方法遍历购物车列表,对于每个商品,我们检查它是否已经在合并后的列表中存在。如果存在,我们将它的数量加到已有的商品中;如果不存在,我们将它添加到列表末尾。最后,我们得到了合并后的购物车列表 mergedCart。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)