js合并數組對象(將數組中具有相同屬性對象合并到一起,組成一個新的數組)

一、根據數組對象中某一key值,合并相同key值的字段,到同一個數組對象中,組成新的數組

1.原數組:

var array = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, age: 25 },{ id: 3, name: 'Charlie', age: 30 }
];

2.合并后數組:

var array = [{ id: 1, name: 'Alice', age: 25  },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie', age: 30 }
];

3.實現方法:

// 原始數組
var array = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 1, age: 25 },{ id: 3, name: 'Charlie', age: 30 }
];// 使用 reduce 方法合并具有相同屬性的對象
var mergedArray = array.reduce(function(result, obj) {var target = result.find(function(item) {return item.id === obj.id;});if (target) {Object.assign(target, obj);} else {result.push(obj);}return result;
}, []);console.log(mergedArray);
4.測試:

在這里插入圖片描述

二、根據數組對象中某一key值,合并相同key值的對象,到同一個對象中,組成新的數組

1.原數組:

let list = [{name: "張三",gender: "張",age: "20"},{name: "李四",gender: "李",age: "25"},{name: "王五",gender: "王",age: "30"},{name: "張飛",gender: "張",age: "20"},{name: "李紅",gender: "李",age: "22"}]

2.合并后數組:

let list = [{gender: "張",{name: "張三",gender: "張",age: "20"},{name: "張飛",gender: "張",age: "20"}},{gender: "李",{name: "李四",gender: "李",age: "25"},{name: "李紅",gender: "李",age: "22"}},{gender: "王",{name: "王五",gender: "王",age: "30"},}]

3.實現方法一:

let tempArr = [];
let Data = [];
for (let i = 0; i < list.length; i++) {if (tempArr.indexOf(list[i].gender) === -1) {Data.push({gender: list[i].gender,dataInfo: [list[i]]});tempArr.push(list[i].gender);} else {for (let j = 0; j < Data.length; j++) {if (Data[j].gender== list[i].gender) {Data[j].dataInfo.push(list[i]);break;}}}}console.log(Data);
測試:

在這里插入圖片描述

4.實現方法二:

let dataInfo = {};
list.forEach((item, index) => {let { gender } = item;if (!dataInfo[gender]) {dataInfo[gender] = {gender,			child: []}}dataInfo[gender].child.push(item);
});
let newList = Object.values(dataInfo); // list 轉換成功的數據
console.log(newList)

測試:

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/35665.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/35665.shtml
英文地址,請注明出處:http://en.pswp.cn/news/35665.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

C++隱式調用和explicit關鍵字

隱式類型轉換 #include <iostream> using namespace std;class Point { public:int x, y;Point(int x 0, int y 0): x(x), y(y) {} };void displayPoint(const Point& p) {cout << "(" << p.x << "," << p.y <&l…

接口測試實戰,Jmeter正則提取響應數據-詳細整理,一篇打通...

目錄&#xff1a;導讀 前言一、Python編程入門到精通二、接口自動化項目實戰三、Web自動化項目實戰四、App自動化項目實戰五、一線大廠簡歷六、測試開發DevOps體系七、常用自動化測試工具八、JMeter性能測試九、總結&#xff08;尾部小驚喜&#xff09; 前言 在測試時&#xf…

服務器安裝JDK

三種方法 方法一&#xff1a; 方法二&#xff1a; 首先登錄到Oracle官網下載JDK JDK上傳到服務器中&#xff0c;記住文件上傳的位置是在哪里&#xff08;我放的位置在/www/java&#xff09;&#xff0c;然后看下面指示進行安裝 方法三&#xff1a; 首先登錄到Oracle官網下載…

Skywalking-9.6.0系列之本地源碼編譯并啟動

Skywalking相信有很多人使用過&#xff0c;通過容器或者下載安裝包進行安裝的&#xff0c;今天從源代碼角度&#xff0c;拉取、構建、啟動。 官方文檔步驟簡潔明了&#xff0c;我這邊會結合自己遇到的一些問題做出總結。 當前構建資源版本&#xff1a; MAC 10.15.7IDEA 2021.…

基于STM32CUBEMX驅動TMOS模塊STHS34PF80(1)----獲取ID

基于STM32CUBEMX驅動TMOS模塊STHS34PF80----1.獲取ID 概述樣品申請視頻教程所有功能接口最小系統圖生成STM32CUBEMX串口配置IIC配置IO口設置串口重定向 模塊地址參考demoIIC寫函數IIC讀函數參考程序初始化獲取ID主函數 概述 STHS34PF80 是一款非冷卻、工廠校準的紅外運動和存在…

端口輸入的數據為什么要打拍?

一次作者在開發圖像時候&#xff0c;對輸入的圖像沒有打拍&#xff0c;直接輸出給顯示終端&#xff0c;時好時壞&#xff0c;或者圖像顏色不正確&#xff0c;最終經過打拍解決了此問題。 //配置為16-Bit SDR ITU-R BT.656模式時pixel_data[23:16]為高阻。always (posedge pixe…

AtCoder Beginner Contest 314-A/B/C

A - 3.14 題目要求輸出圓周率保留小數幾位后的結果 用字符串來存儲長串的圓周率&#xff0c;截取字符串就可以了。 #include<iostream> using namespace std; int main() {string s"3.1415926535897932384626433832795028841971693993751058209749445923078164062…

C#多線程開發詳解

C#多線程開發詳解 持續更新中。。。。。一、為什么要使用多線程開發1.提高性能2.響應性3.資源利用4.任務分解5.并行計算6.實時處理 二、多線程開發缺點1.競態條件2.死鎖和饑餓3.調試復雜性4.上下文切換開銷5.線程安全性 三、多線程開發涉及的相關概念常用概念(1)lock(2)查看當前…

NanoPi NEO移植LVGL8.3.5到1.69寸ST7789V屏幕

移植前準備 移植好fbtft屏幕驅動 參考鏈接&#xff1a;友善之臂NanoPi NEO利用fbtft驅動點亮1.69寸ST7789V2屏幕 獲取源碼 名稱地址描述lvglhttps://github.com/lvgl/lvgl.gitlvgl-8.3.5lv_drivershttps://github.com/lvgl/lv_drivers.gitlv_drivers-6.1.1 創建工程目錄 創…

RF PCB的9條改進型建議

1.小功率的RF的PCB設計中,主要使用標準的FR4材料(絕緣特性好、材質均勻、介電常數ε=4,10%)。主要使用4層~6層板,在成本非常敏感的情況下可以使用厚度在1mm以下的雙面板,要保證反面是一個完整的地層,同時由于雙面板的厚度在1mm以上,使得地層和信號層之間的FR4介質較厚,…

Linux | curl命令調用接口時查看調用時長和詳情

關注wx&#xff1a; CodingTechWork 引言 在服務器中通過curl命令調用接口時&#xff0c;我們經常需要分析一些時長。本文主要總結兩種方式進行處理。 curl命令 使用time命令 time curl -k -u <username>:<password> https://127.0.0.1/xxxx -vvv 使用文本 編…

HTML <span> 標簽

定義和用法 <span> 標簽被用來組合文檔中的行內元素。 瀏覽器支持 元素ChromeIEFirefoxSafariOpera<span>YesYesYesYesYes所有瀏覽器都支持 <span> 標簽。 HTML 與 XHTML 之間的差異 NONE 提示和注釋: 提示:請使用 <span> 來組合行內元素,以便…

旋轉圖像(旋轉矩陣)

原題鏈接 旋轉圖像備戰技術面試&#xff1f;力扣提供海量技術面試資源&#xff0c;幫助你高效提升編程技能&#xff0c;輕松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/rotate-image/ 算法分析 若矩陣的行列數為N&#xff0c;設i表示行索引&#xff0c;i屬…

win10中Docker安裝、構建鏡像、創建容器、Vscode連接實例

Docker方便一鍵構建項目所需的運行環境&#xff1a;首先構建鏡像(Image)。然后鏡像實例化成為容器(Container)&#xff0c;構成項目的運行環境。最后Vscode連接容器&#xff0c;方便我們在本地進行開發。下面以一個簡單的例子介紹在win10中實現&#xff1a;Docker安裝、構建鏡像…

Flutter BottomSheet 三段式拖拽

BottomSheetBehavior 追蹤 BottomSheet系統默認實現效果準備要實現的功能點&#xff1a;定義三段式狀態&#xff1a;BottomSheetBehavoir閥值定義1. 未達到滾動閥值&#xff0c;恢復狀態2. 達到滾動閥值&#xff0c;更新狀態 前面倒是有講過Android原生的BottomSheetBehavior&a…

Flask 框架集成Bootstrap

前面學習了 Flask 框架的基本用法&#xff0c;以及模板引擎 Jinja2&#xff0c;按理說可以開始自己的 Web 之旅了&#xff0c;不過在啟程之前&#xff0c;還有個重要的武器需要了解一下&#xff0c;就是著名的 Bootstrap 框架和 Flask 的結合&#xff0c;這將大大提高開發 Web …

國產數據庫-內核特性-低基數全局字典

國產數據庫-內核特性-StarRocks低基數全局字典 StarRocks2.0引入了低基數全局字典&#xff0c;可以通過全局字典將字符串的相關操作轉換成整型相關操作&#xff0c;大大提升查詢性能。 1、低基數字典 對于利用整型替代字符串進行處理&#xff0c;通常使用字典編碼進行優化。Sta…

人大金倉助力某大型金融機構業務系統異地容災優化升級

日前&#xff0c;人大金倉助力某大型金融機構應收賬款融資服務平臺異地容災項目順利上線&#xff0c;保證了平臺系統運行的連續性和數據安全&#xff0c;為充分發揮平臺的融資功能&#xff0c;緩解中小微企業融資難提供了強有力的保障。 “ 緩解中小微企業融資難 某大型金融機構…

【MySQL--->數據庫操作】

文章目錄 [TOC](文章目錄) 一、操作語句1.增2.刪3.改4.查5.備份 二、字符集與校驗規則 一、操作語句 1.增 語句格式:create database [if no exists]數據庫名[create_specification [,create_specification] …]; 中括號內是可選項,if no exists是指如果數據庫不存在就創建,存…

STM32 F103C8T6學習筆記7:雙機無線串口通信

今日嘗試配通倆個C8T6單片機之間的無線串口通信&#xff0c;文章提供原理&#xff0c;源碼&#xff0c;測試效果圖&#xff0c;測試工程下載&#xff1a; 目錄 傳輸不規范問題&#xff1a; 串口通信資源&#xff1a; 單個串口資源理解&#xff1a; 單片機串口資源&#xf…