当前位置: 首页 > 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)

测试:

在这里插入图片描述

http://www.lryc.cn/news/122597.html

相关文章:

  • Spring BeanPostProcessor 接口的作用和使用
  • Android 13 Hotseat定制化修改——006 hotseat图标禁止移动到Launcher中
  • RabbitMQ 发布确认机制
  • 微信小程序使用rich-text解析富文本字符串的时候,遇到image标签图片很大超过屏幕
  • 使用IIS服务器部署Flask python Web项目
  • sentinel核心流程源码解析
  • 中睿天下Coremail | 2023年第二季度企业邮箱安全态势观察
  • 桶排序-1184:明明的随机数
  • Spring Boot中整合Keycloak OpenID Connect(OIDC)
  • 如何使用Mac终端给树莓派pico构建C/C++程序进行开发,以及遇到各种问题该怎么处理,不使用任何IDE或编辑器(例如VS Code)
  • linux 关机和重启
  • Python(八十三)字符串的比较操作
  • Java面试
  • 基于java的voliate关键字详解
  • 企业计算机服务器中了360后缀勒索病毒怎么办,勒索病毒解密数据恢复
  • W6100-EVB-PICO 做TCP Server进行回环测试(六)
  • 前端小兔鲜儿2
  • Pycharm 双击启动失败?
  • spring 事务回滚失败异常
  • Kafka 01——Kafka的安装及简单入门使用
  • 【爬虫】爬取旅行评论和评分
  • C++ 泛型编程:函数模板
  • .NET实现解析字符串表达式
  • Ae 效果:CC Environment
  • PotgreSQL 基于时间点恢复
  • ③ vue组件
  • 政策因子条件列表类型
  • python中yield关键字
  • 2023年10款常用的Mac工具合集
  • Python爬虫——requests_cookie登陆古诗文网