JavaScript购物车开发：指定商品ID价格求和并生成新数组

一、现有商品加入购物车函数 #

已实现的fuBuyNow函数代码如下：

function fuBuyNow() {
    var prodqty = 1;
    var prodid = localStorage.ls_productID;
    var prodprice = $('#ppriceoffer').html();
    var cartItem = {
        productid: prodid,
        productqty: prodqty,
        productprice: prodprice
    };
    var cartItemJSON = JSON.stringify(cartItem);
    console.log(cartItemJSON);

    var cartArray = new Array();
    // If javascript shopping cart session is not empty
    if (localStorage.getItem('shopping-cart')) {
        cartArray = JSON.parse(localStorage.getItem('shopping-cart'));
    }
    cartArray.push(cartItemJSON);

    var cartJSON = JSON.stringify(cartArray);
    localStorage.setItem('shopping-cart', cartJSON);
}

注意：当前函数存在逻辑问题——将序列化后的JSON字符串推入数组，后续从localStorage读取后，数组内会全是字符串格式的对象，不利于后续数据处理。建议直接推入cartItem对象再统一序列化，修正后的核心逻辑如下：

// 替换原代码中push和序列化部分
cartArray.push(cartItem); // 直接推入对象而非字符串
var cartJSON = JSON.stringify(cartArray);
localStorage.setItem('shopping-cart', cartJSON);

二、指定商品价格求和并生成新数组 #

针对给定的购物车数据，需筛选productid为10001和10005的商品，按商品ID分组计算总数量与总价，最终生成新数组。

原始数据 #

var obj = "[{\"slno\":\"1\",\"productid\":\"10001\",\"qty\":\"1\",\"price\":\"250\"},{\"slno\":\"2\",\"productid\":\"10005\",\"qty\":\"1\",\"price\":\"350\"},{\"slno\":\"3\",\"productid\":\"10001\",\"qty\":\"1\",\"price\":\"250\"},{\"slno\":\"4\",\"productid\":\"10003\",\"qty\":\"1\",\"price\":\"450\"},{\"slno\":\"5\",\"productid\":\"10005\",\"qty\":\"1\",\"price\":\"350\"}]";

实现代码 #

// 1. 解析JSON字符串为数组
const cartData = JSON.parse(obj);

// 2. 定义需要统计的商品ID列表
const targetIds = ['10001', '10005'];

// 3. 分组统计总数量与总价
const groupedData = cartData
  .filter(item => targetIds.includes(item.productid))
  .reduce((acc, item) => {
    const id = item.productid;
    const price = Number(item.price);
    const qty = Number(item.qty);

    if (!acc[id]) {
      acc[id] = {
        productid: id,
        totalQty: 0,
        totalPrice: 0
      };
    }

    acc[id].totalQty += qty;
    acc[id].totalPrice += price * qty;

    return acc;
  }, {});

// 4. 将分组对象转换为数组
const finalResult = Object.values(groupedData);

console.log(finalResult);

输出结果 #

[
  { productid: '10001', totalQty: 2, totalPrice: 500 },
  { productid: '10005', totalQty: 2, totalPrice: 700 }
]

内容的提问来源于stack exchange，提问作者Vivek Kumar