如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？-js教程-PHP中文网

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？

聖光之護

发布： 2025-03-22 11:28:26

原创

873人浏览过

如何使用javascript将具有相同id的数组元素合并到一个对象中？

JavaScript数组元素合并：将相同ID的元素合并到一个对象中

在数据处理中，经常需要将具有相同ID的数组元素合并成单个对象。本文提供一种JavaScript解决方案，将具有相同ID但属性不同的数组元素，转换成新的数组格式。

原始数据格式：

const list = [
    { id: "202301", jine: 23, type: "晚餐" },
    { id: "202301", jine: 87.5, type: "早餐" },
    { id: "202301", jine: 1065.5, type: "中餐" },
    { id: "202302", jine: 10, type: "晚餐" },
    { id: "202302", jine: 181.5, type: "早餐" },
    { id: "202302", jine: 633.5, type: "中餐" }
];

登录后复制

目标数据格式：

const targetList = [
    { id: "202301", jine1: 87.5, jine2: 1065.5, jine3: 23 },
    { id: "202302", jine1: 181.5, jine2: 633.5, jine3: 10 }
];

登录后复制

解决方案：

立即学习“Java免费学习笔记（深入）”；

我们将使用reduce方法实现数据转换。该方法迭代数组，将每个元素累积到一个结果对象中。

const result = Object.values(list.reduce((acc, curr) => {
    const { id, jine, type } = curr;
    if (!acc[id]) {
        acc[id] = { id };
    }
    switch (type) {
        case '早餐': acc[id].jine1 = jine; break;
        case '中餐': acc[id].jine2 = jine; break;
        case '晚餐': acc[id].jine3 = jine; break;
    }
    return acc;
}, {}));

console.log(result); // 输出目标数据格式

登录后复制

代码解释：