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

news2024/11/24 2:13:10

一、根据数组对象中某一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.coloradmin.cn/o/872050.html

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

相关文章

【JVM】Java内存泄露的排查思路?

文章目录 Java内存为什么会泄露&#xff1f;java内存泄露的排查思路 Java内存为什么会泄露&#xff1f; Java内存泄露&#xff08;Memory Leak&#xff09;是指在Java程序中&#xff0c;无用的对象占用了堆内存&#xff0c;但无法被垃圾回收器回收释放&#xff0c;从而导致可用…

Java地图专题课 基本API BMapGLLib 地图找房案例 MongoDB

本课程基于百度地图技术&#xff0c;由基础入门开始到应用实战&#xff0c;适合零基础入门学习。将企业项目中地图相关常见应用场景的落地实战&#xff0c;包括有地图找房、轻骑小程序、金运物流等。同时讲了基于Netty实现高性能的web服务&#xff0c;来处理高并发的问题。还讲…

Vue前端 更具router.js 中的meta的roles实现路由卫士,实现权限判断。

参考了之篇文章 1、我在登陆时获取到登录用户的角色名roles&#xff0c;并存入sessionStorage中&#xff0c;具体是在login页面实现&#xff0c;还是在menu页面实现都可以。在menu页面实现&#xff0c;可以显得登陆快一些。 2、编写router.js&#xff0c;注意&#xff0c;一个…

链表(基础详解、实现、OJ笔试题)

文章目录 &#x1f9da;什么是链表&#xff08;链表概念及分类&#xff09;链表分类单链表和双链表的区别 &#x1f6b4;‍♂️单链表、双向链表的实现单链表的实现双向链表的实现 &#x1f349;链表经典OJ笔试题反转单链表移除链表元素合并两个有序链表链表分割链表的中间结点…

Ajax入门+aixos+HTTP协议

一.Ajax入门 概念:AJAX是浏览器与服务器进行数据通信的技术 axios使用: 引入axios.js使用axios函数:传入配置对象,再用.then回调函数接受结果,并做后续处理 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>01.axios使用…

【软件工程】面向对象方法-RUP

RUP&#xff08;Rational Unified Process&#xff0c;统一软件开发过程&#xff09;。 RUP特点 以用况驱动的&#xff0c;以体系结构为中心的&#xff0c;迭代增量式开发 用况驱动 用况是能够向用户提供有价值结果的系统中的一种功能用况获取的是功能需求 在系统的生存周期中…

机器学习笔记:李宏毅 stable diffusion

1 基本框架 ①&#xff1a;文字变成向量 ②&#xff1a;喂入噪声文字encoder&#xff0c;产生中间产物 ③&#xff1a;decoder 还原图片 2 text encoder 这张图越往右下表示效果越好&#xff0c;可以看到text encoder尺寸越大&#xff0c;对后续生成图片的增益越多 3 评价图…

【linux基础操作】如何一键下载 各个版本的python库文件

把需要下载的库名字&版本号&#xff0c;存在.txt文件中 2. 输入命令执行&#xff0c;下载 pip install -r your_file_name该命令的作用是从指定的文本文件中安装 Python 依赖库。 在这个命令中&#xff0c;-r 参数表示从一个文本文件&#xff08;通常以 .txt 结尾&#xf…

FastAPI入门

目录 FastAPI FastAPI 是什么 为什么要用 FastAPI FastAPI 入门 安装 用 FastAPI 写个接口 调试接口 创建快捷请求 保存为快捷请求 发送请求 总结 FastAPI FastAPI 是什么 什么是 FastAPI 呢&#xff1f; FastAPI 是 Python 的一个框架&#xff0c;如果要类比的话…

Java 的 Stream

一、创建 Stream 1.1、创建 Stream 流 1.1.1、List 集合获取 Stream 流 Collection<String> list new ArrayList<>(); Stream<String> s1 list.stream(); 1.1.2、Map 集合获取 stream 流 Map<String, Integer> map new HashMap<>(); // …

动态链接(8/13)

静态链接的缺点&#xff1a;生成的可执行文件体积较大&#xff0c;当多个程序引用相同的公共代码时&#xff0c;这些公共代码会多次加载到内存&#xff0c;浪费内存资源。 为了解决这个问题&#xff0c;动态链接对静态链接做了一些优化&#xff1a;对一些公用的代码&#xff0…

Titanic--细节记录三

目录 image sklearn模型算法选择路径图 留出法划分数据集 ‘留出’的含义 基本步骤和解释 具体例子 创造一个数据集 留出法划分 预测结果可视化 分层抽样 设置方法 划分数据集的常用方法 train_test_split 什么情况下切割数据集的时候不用进行随机选取 逻辑回归…

Linux系统下安装Git软件

环境说明 Linux系统&#xff1a;CentOS 7.9 安装GCC等 JDK版本&#xff1a;jdk-8u202-linux-x64.tar.gz Maven版本&#xff1a;apache-maven-3.8.8-bin.tar.gz 在以上环境下安装Git&#xff08;git-2.41.0.tar.gz&#xff09;软件。 查看是否安装Git软件 查看Git版本&#…

python代码一行过长怎么办,python中一行代码太长

这篇文章主要介绍了python每行代码长度不能超过100个字符&#xff0c;具有一定借鉴价值&#xff0c;需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获&#xff0c;下面让小编带着大家一起了解一下。 30行python代码实现豆瓣电影排行爬取 实现过程完整代码 今天我们想实…

四、Linux常用命令(一)

1、ls命令 (1)ls: list&#xff0c;列表。 (2)作用&#xff1a;使用列表把当前文件夹下所有文件显示出来。 (3)ls -a: 显示所有文件&#xff0c;包括隐藏文件。 (3)ls -l: 显示文件的详细信息。 (3)显示所有文件且显示详细信息&#xff0c;以下四种方式都可以。 ls -a -l…

腾讯云2核2g轻量应用服务器能容纳多少人?

腾讯云轻量应用服务器2核2g能容纳多少人&#xff1f;轻量应用服务器2核2g配置自带4M公网带宽&#xff0c;以网站应用为例&#xff0c;假设优化后的网页平均大小为60KB&#xff0c;2核2G4M带宽轻量服务器可以支持10个并发数&#xff0c;即同时10个人在1秒内同时打开网站&#xf…

Visual Studio 2019 解决scanf函数报错问题

前言 Visual Studio 2019 解决scanf函数报错问题 博主博客链接&#xff1a;https://blog.csdn.net/m0_74014525 关注博主&#xff0c;后期持续更新系列文章 *****感谢观看&#xff0c;希望对你有所帮助***** 系列文章 第一篇&#xff1a;Visual Studio 2019 详细安装教程&…

软工导论知识框架(八)面向对象设计风格

一.面向对象实现 把面向对象设计结果翻译成面向对象程序测试并调试面向对象的程序 二.程序设计语言 所有语言都可完成面向对象实现&#xff0c;但效果不同。 使用非面向对象语言编写面向对象程序&#xff0c;则必须由程序员自己把面向对象概念映射到目标程序中。 1.将来能够占…

Flutter源码分析笔记:Widget类源码分析

Flutter源码分析笔记 Widget类源码分析 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at: https://jclee95.blog.csdn.netEmail: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_28550263/article/details/132259681 【介绍】&#x…

JZ37序列化二叉树

题目地址&#xff1a;序列化二叉树_牛客题霸_牛客网 题目回顾&#xff1a; 解题思路&#xff1a; 首先&#xff0c;序列化就是将二叉树的节点值放入一个字符串中&#xff0c;这里可以按照前序遍历的思路来进行操作&#xff0c;谦虚遍历是&#xff1a;根左右的情况&#xff0c;…