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.mzph.cn/news/35665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口测试实战,Jmeter正则提取响应数据-详细整理,一篇打通...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 在测试时&#xf…

服务器安装JDK

三种方法 方法一&#xff1a; 方法二&#xff1a; 首先登录到Oracle官网下载JDK JDK上传到服务器中&#xff0c;记住文件上传的位置是在哪里&#xff08;我放的位置在/www/java&#xff09;&#xff0c;然后看下面指示进行安装 方法三&#xff1a; 首先登录到Oracle官网下载…

基于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…

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 创建工程目录 创…

旋转图像(旋转矩阵)

原题链接 旋转图像备战技术面试&#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…

Redis的单线程与多线程

Redis的核心处理逻辑一直都是单线程 有一些分支模块是多线程(某些异步流程从4.0开始用的多线程&#xff0c;例如UNLINK、FLUSHALL ASYNC、FLUSHDB ASYNC等非阻塞的删除操作。网络I/O解包从6.0开始用的是多线程;) 为什么是单线程 多线程多好啊可以利用多核优势 官方给的解释 …

UI自动化环境的搭建(python+pycharm+selenium+chrome)

最近在做一些UI自动化的项目&#xff0c;为此从环境搭建来从0到1&#xff0c;希望能够帮助到你&#xff0c;同时也是自我的梳理。将按照如下进行开展&#xff1a; 1、python的下载、安装&#xff0c;python环境变量的配置。 2、pycharm开发工具的下载安装。 3、selenium的安装。…

Leetcode34 在排序数组中查找元素的第一个和最后一个位置

给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 代码&#xff1a; c…

服务器安全维护注意事项有哪些?

服务器的安全关系着公司整个网络以及所有数据的安全&#xff0c;我们该如何做好服务器后续的安全维护呢?河南亿恩科技股份有限公司&#xff0c;专注服务器托管23年&#xff0c;不仅是国内专业的互联网基础应用服务提供商之一&#xff0c;还是国家工信部认定的综合电信服务运营…

【Linux命令行与Shell脚本编程】第十九章 正则表达式

Linux命令行与Shell脚本编程 第十九章 正则表达式 文章目录 Linux命令行与Shell脚本编程 第十九章 正则表达式九.正则表达式9.1.正则表达式基础9.1.1.正则表达式的类型9.2.定义BRE模式9.2.1.普通文本9.2.2.特殊字符 9.2.3.锚点字符锚定行首^锚定行尾$组合锚点 9.2.4.点号字符\.…

funbox3靶场渗透笔记

funbox3靶场渗透笔记 靶机地址 https://download.vulnhub.com/funbox/Funbox3.ova 信息收集 fscan找主机ip192.168.177.199 .\fscan64.exe -h 192.168.177.0/24___ _/ _ \ ___ ___ _ __ __ _ ___| | __/ /_\/____/ __|/ __| __/ _ |/ …