如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？-js教程-PHP中文網

JavaScript數組元素合併：將相同ID的元素合併到一個對像中

首頁

web前端

js教程

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？

Linda Hamilton

Apr 04, 2025 pm 05:09 PM

switch red

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

代碼解釋：

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

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1794

CakePHP 教程

1740

Laravel 教程

1591

PHP教程

1474

NYT迷你填字遊戲答案

267

587

Related knowledge

java中文亂碼問題亂碼產生原因和修復方案 May 28, 2025 pm 05:36 PM

Java中文亂碼問題主要由字符編碼不一致導致，修復方法包括確保系統編碼一致性和正確處理編碼轉換。 1.統一使用UTF-8編碼，從文件到數據庫和程序。 2.讀取文件時明確指定編碼，如使用BufferedReader和InputStreamReader。 3.設置數據庫字符集，如MySQL使用ALTERDATABASE語句。 4.HTTP請求和響應中設置Content-Type為text/html;charset=UTF-8。5.注意編碼一致性、轉換和調試技巧，確保正確處理數據。

linux如何限制用戶資源？ ulimit怎麼配置？ May 29, 2025 pm 11:09 PM

Linux系統通過ulimit命令限制用戶資源，防止資源過度佔用。 1.ulimit是shell內置命令，可限製文件描述符數（-n）、內存大小（-v）、線程數（-u）等，分為軟限制（當前生效值）和硬限制（最高上限）。 2.臨時修改直接使用ulimit命令，如ulimit-n2048，但僅對當前會話有效。 3.永久生效需修改/etc/security/limits.conf及PAM配置文件，並添加sessionrequiredpam_limits.so。 4.systemd服務需在unit文件中設置Lim

Laravel中的中間件（Middleware）是什麼？如何使用？ May 29, 2025 pm 09:27 PM

中間件是Laravel中的過濾機制，用於攔截和處理HTTP請求。使用步驟：1.創建中間件：使用命令“phpartisanmake:middlewareCheckRole”。 2.定義處理邏輯：在生成的文件中編寫具體邏輯。 3.註冊中間件：在Kernel.php中添加中間件。 4.使用中間件：在路由定義中應用中間件。

Laravel頁面緩存（Page Cache）策略 May 29, 2025 pm 09:15 PM

Laravel的页面缓存策略可以显著提升网站性能。1)使用cache辅助函数实现页面缓存，如Cache::remember方法。2)选择合适的缓存后端，如Redis。3)注意数据一致性问题，可使用细粒度缓存或事件监听器清除缓存。4)结合路由缓存、视图缓存和缓存标签进一步优化。通过合理应用这些策略，可以有效提升网站性能。

韓漫在線觀看免費漫畫入口免費韓漫在線閱讀免費下拉式 Jun 12, 2025 pm 08:03 PM

隨著互聯網的蓬勃發展，韓漫（韓國漫畫）以其精美的畫風、引人入勝的劇情和豐富多樣的題材，贏得了全球範圍內越來越多讀者的喜愛。想要隨時隨地暢遊在精彩的韓漫世界中，找到一個穩定、免費且資源豐富的在線閱讀平台至關重要。本文將為您提供一份詳盡的韓漫在線觀看免費漫畫入口指南，助您輕鬆開啟您的韓漫之旅。

Redis主從復制故障的排查與修復流程 Jun 04, 2025 pm 08:51 PM

Redis主從復制故障的排查與修復步驟包括：1.檢查網絡連接，使用ping或telnet測試連通性；2.檢查Redis配置文件，確保replicaof和repl-timeout設置正確；3.查看Redis日誌文件，查找錯誤信息；4.如果是網絡問題，嘗試重啟網絡設備或切換備用路徑；5.如果是配置問題，修改配置文件；6.如果是數據同步問題，使用SLAVEOF命令重新同步數據。

Redis集群節點故障的快速定位與處理 Jun 04, 2025 pm 08:54 PM

Redis集群節點故障的快速定位與處理步驟如下：1.確認故障：使用CLUSTERNODES命令查看節點狀態，若顯示fail則節點故障。 2.確定原因：檢查網絡、硬件和配置，常見問題包括內存限制超出。 3.修復與恢復：根據原因採取措施，如重啟服務、更換硬件或修正配置。 4.注意事項：確保數據一致性，選擇合適的故障轉移策略，建立監控與告警系統。