当前位置: 首页 > news >正文

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)

测试:

在这里插入图片描述

相关文章:

js合并数组对象(将数组中具有相同属性对象合并到一起,组成一个新的数组)

一、根据数组对象中某一key值&#xff0c;合并相同key值的字段&#xff0c;到同一个数组对象中&#xff0c;组成新的数组 1.原数组&#xff1a; var array [{ id: 1, name: Alice },{ id: 2, name: Bob },{ id: 1, age: 25 },{ id: 3, name: Charlie, age: 30 } ];2.合并后数…...

Spring BeanPostProcessor 接口的作用和使用

BeanPostProcessor 接口是 Spring 框架中的一个扩展接口&#xff0c;用于在 Spring 容器实例化、配置和初始化 bean 的过程中提供自定义的扩展点。通过实现这个接口&#xff0c;您可以在 bean 实例创建的不同生命周期阶段插入自己的逻辑&#xff0c;从而实现对 bean 行为的定制…...

Android 13 Hotseat定制化修改——006 hotseat图标禁止移动到Launcher中

目录 一.背景 二.方案 三.具体实践 一.背景 客户定制需要修改让hotseat中的icon不要移动到Launcher中,所以需要进行定制 二.方案 原生的Hotseat与Launcher是可以相互移动的,然后现在的需求是Hotseat中的图标只能在Hotseat中移动,所以需要做下限制 思路:在事件拦截的地…...

RabbitMQ 发布确认机制

发布确认模式是避免消息由生产者到RabbitMQ消息丢失的一种手段 发布确认模式 原理说明实现方式开启confirm&#xff08;确认&#xff09;模式阻塞确认异步确认 总结 原理说明 生产者通过调用channel.confirmSelect方法将信道设置为confirm模式&#xff0c;之后RabbitMQ会返回Co…...

微信小程序使用rich-text解析富文本字符串的时候,遇到image标签图片很大超过屏幕

场景&#xff1a; 使用uniapp开发微信小程序&#xff0c;解析富文本文章需求 用到的组件&#xff1a; u-view2.0的u-parse uniapp提供的rich-text 以上两种组件都是解析富文本的作用&#xff0c;一般用于富文本解析场景&#xff0c;比如解析文章内容&#xff0c;商品详情&am…...

使用IIS服务器部署Flask python Web项目

参考文章 ""D:\Program Files (x86)\Python310\python310.exe"|"D:\Program Files (x86)\Python310\lib\site-packages\wfastcgi.py"" can now be used as a FastCGI script processor参考文章 请求路径填写*&#xff0c;模块选择FastCgiModule&…...

sentinel核心流程源码解析

sentinel的处理槽(ProcessorSlot) 可以说&#xff0c;sentinel实现的各种功能就是由各处理槽完成的 ,ProcessorSlot定义了四个方法&#xff1a; 当进入该处理槽时触发该方法 处理完 entry方法之后触发该方法 退出该处理槽时触发该方法 exit方法处理完成时触发该方法 sentinel的…...

中睿天下Coremail | 2023年第二季度企业邮箱安全态势观察

今日&#xff0c;中睿天下联合Coremail邮件安全发布《2023第二季度企业邮箱安全性研究报告》&#xff0c;对2023第二季度和2023上半年的企业邮箱的安全风险进行了分析。 一 垃圾邮件同比下降16.38% 根据监测&#xff0c;2023年Q2垃圾邮件数量达到6.47亿封&#xff0c;环比下降…...

桶排序-1184:明明的随机数

【题目描述】 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0c;他先用计算机生成了N个1到1000之间的随机整数&#xff08;N≤100&#xff09;&#xff0c;对于其中重复的数字&#xff0c;只保留一个&#xff0c;把其余相同的数去掉&#x…...

Spring Boot中整合Keycloak OpenID Connect(OIDC)

在Spring Boot中整合Keycloak OpenID Connect&#xff08;OIDC&#xff09;是一个常见的任务&#xff0c;用于实现身份验证和授权。Keycloak是一个开源的身份和访问管理解决方案&#xff0c;而OpenID Connect是构建在OAuth 2.0之上的认证和授权协议。下面是一个简单的步骤指南&…...

如何使用Mac终端给树莓派pico构建C/C++程序进行开发,以及遇到各种问题该怎么处理,不使用任何IDE或编辑器(例如VS Code)

写本文的原因是官方的教程已经过时了&#xff0c;如果你现在按照官方教程来在 Mac 上进行配置&#xff0c;那么会遇到一堆问题&#xff0c;比如我几乎把能踩的“雷”都踩了。所以这里记录了完整过程&#xff0c;以及各种错误的原因和处理方法&#xff0c;不然以后换 Mac 了或者…...

linux 关机和重启

关机和重启 关机和重启之前最好先数据数据同步一下 # 将数据由内存同步到硬盘sync 关机 #shutdown [选项] 时间#立即进入维护模式shutdown now#立即重启shutdown -r now#20:00 重新启动计算机shutdown -r 20:00& #立即关机shutdown -h now# 20:00 关闭计算机shutdown -h 20…...

Python(八十三)字符串的比较操作

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...

Java面试

Java面试宝典是一本面向Java开发者的面试准备指南&#xff0c;旨在帮助准备参加Java相关职位面试的人们更好地准备和应对面试。以下是一些可能在Java面试中涉及的主题和问题&#xff0c;供您参考&#xff1a; Java基础知识&#xff1a; 什么是Java虚拟机&#xff08;JVM&#x…...

基于java的voliate关键字详解

voliate关键字的作用: 一、内存可见性 基于缓存一致性协议&#xff0c;当用voliate关键字修饰的变量改动时&#xff0c;cpu会通知其他线程&#xff0c;缓存已被修改&#xff0c;需要更新缓存。这样每个线程都能获取到最新的变量值。 二、基于内存屏障的防止指令重排 用voli…...

企业计算机服务器中了360后缀勒索病毒怎么办,勒索病毒解密数据恢复

随着计算机技术的不断发展&#xff0c;企业的办公系统得到了很大提升&#xff0c;但是随之而来的网络安全威胁也不断增加&#xff0c;勒索病毒的攻击事件时有发生。近期&#xff0c;我们收到某地连锁超市的求助&#xff0c;企业的计算机服务器遭到了360后缀勒索病毒攻击&#x…...

W6100-EVB-PICO 做TCP Server进行回环测试(六)

前言 上一章我们用W6100-EVB-PICO开发板做TCP 客户端连接服务器进行数据回环测试&#xff0c;那么本章将用开发板做TCP服务器来进行数据回环测试。 TCP是什么&#xff1f;什么是TCP Server&#xff1f;能干什么&#xff1f; TCP (Transmission Control Protocol) 是一种面向连…...

前端小兔鲜儿2

day10-小兔鲜儿 01-banner-轮播图 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FWNmPpj-1691944251554)(assets/1680344354682.png)] index.css HTML结构 <!-- banner --><div class"banner"><div class"wrappe…...

Pycharm 双击启动失败?

事故 双击 Pycharm 后&#xff0c;出现加载工程&#xff0c;我不想加载这个工程&#xff0c;就点击了弹出的 cancle 取消按钮。然后再到桌面双击 Pycharm 却发现无法启动了。哪怕以管理员权限运行也没用&#xff0c;就是不出界面。 原因未知 CtrlshiftESC 打开后台&#xff…...

spring 事务回滚失败异常

1 背景介绍 事务模板里抛异常&#xff0c;抛异常前的update操作成功&#xff0c;事务没有回滚成功&#xff0c;业务数据还是落db了。debug代码&#xff0c;发现GenericConnectionContext类中derivedConnectionMap是空的&#xff0c;导致回滚代码没有执行 2 解决方案 保证事务…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...