如何使用纯JavaScript将商品价格与订单数组按用户分组？

需求说明 #

现有两组数据：商品价格数组prices和订单数组orders，需要按用户分组，合并同一用户下相同商品的购买数量，计算每个商品的总价以及用户的总消费金额，最终得到指定结构的结果。

原始数据 #

let prices = [
    {
        product: "p1",
        price: 100,
    },
    {
        product: "p2",
        price: 120.2,
    },
    {
        product: "p3",
        price: 120,
    },
    {
        product: "p4",
        price: 125,
    },
]

let orders = [
    {
        user: "user1",
        product: "p1",
        quantity: 2,
    },
    {
        user: "user1",
        product: "p1",
        quantity: 4,
    },
    {
        user: "user4",
        product: "p3",
        quantity: 5,
    },
    {
        user: "user4",
        product: "p4",
        quantity: 10,
    },
    {
        user: "user3",
        product: "p2",
        quantity: 10,
    },
    {
        user: "user4",
        product: "p1",
        quantity: 10,
    },
    {
        user: "user1",
        product: "p2",
        quantity: 10,
    },
    {
        user: "user3",
        product: "p2",
        quantity: 20,
    }
]

实现方案 #

可以通过以下步骤完成数据处理：

1. 将prices数组转换为Map结构，方便快速根据商品ID查找单价
2. 遍历orders数组，按用户分组，同一用户下再按商品ID分组统计购买数量
3. 对每个用户的商品数据，结合单价计算单商品总价，再汇总用户总消费
4. 将分组后的对象转换为目标数组格式

代码实现 #

// 转换价格数组为Map，key是商品ID，value是单价
const priceMap = new Map(prices.map(item => [item.product, item.price]));

// 初始化一个对象，用来存储按用户分组的中间数据
const userGroups = {};

// 遍历订单数据
orders.forEach(order => {
    const { user, product, quantity } = order;
    // 如果用户不存在，初始化用户数据
    if (!userGroups[user]) {
        userGroups[user] = {
            user,
            product: [],
            total: 0
        };
    }
    const userData = userGroups[user];
    // 查找当前用户下该商品是否已存在
    const existingProduct = userData.product.find(p => p.productName === product);
    const itemPrice = priceMap.get(product);
    
    if (existingProduct) {
        // 商品已存在，累加数量和总价
        existingProduct.quantity += quantity;
        existingProduct.totalPrice = existingProduct.quantity * itemPrice;
    } else {
        // 商品不存在，新增商品记录
        const totalPrice = quantity * itemPrice;
        userData.product.push({
            productName: product,
            quantity,
            itemPrice,
            totalPrice
        });
    }
    // 更新用户总消费
    userData.total += quantity * itemPrice;
});

// 将对象转换为目标数组格式
const result = Object.values(userGroups);

console.log(result);

输出结果 #

运行上述代码后，会得到完整的统计结果（注：示例需求结果中遗漏了user1的p2商品和user3的所有数据，上述代码会完整统计所有用户）：

[
    {
        "user": "user1",
        "product": [
            {
                "productName": "p1",
                "quantity": 6,
                "itemPrice": 100,
                "totalPrice": 600
            },
            {
                "productName": "p2",
                "quantity": 10,
                "itemPrice": 120.2,
                "totalPrice": 1202
            }
        ],
        "total": 1802
    },
    {
        "user": "user4",
        "product": [
            {
                "productName": "p3",
                "quantity": 5,
                "itemPrice": 120,
                "totalPrice": 600
            },
            {
                "productName": "p4",
                "quantity": 10,
                "itemPrice": 125,
                "totalPrice": 1250
            },
            {
                "productName": "p1",
                "quantity": 10,
                "itemPrice": 100,
                "totalPrice": 1000
            }
        ],
        "total": 2850
    },
    {
        "user": "user3",
        "product": [
            {
                "productName": "p2",
                "quantity": 30,
                "itemPrice": 120.2,
                "totalPrice": 3606
            }
        ],
        "total": 3606
    }
]

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