如何使用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 }
];

解決方案：

我們將使用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); // 輸出目標數據格式

代碼解釋：

1. reduce方法: reduce方法迭代list數組，將每個元素累積到一個對象acc中。
2. acc[id] :使用id作為鍵，將數據存儲到acc對像中。如果id不存在，則創建一個新的對象。
3. switch語句:根據type屬性的值，將jine值分別賦值給jine1 、 jine2或jine3 。
4. Object.values :最後，使用Object.values方法將acc對象轉換為數組，得到目標數據格式。

此方法清晰簡潔，避免了使用外部庫，直接利用JavaScript內置方法實現數據轉換。 它也更易於擴展，如果需要處理更多類型的餐飲，只需在switch語句中添加更多case即可。

以上是如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！