js中对象数组根据对象id分组并转map

2023-11-12

js中对象数组根据对象id分组并转map

如果要将具有相同 id 属性的对象元素,分成不同的数组。

可以先从对象数组中提取相同的 id 属性,再使用 Array.reduce() 和 Map 来进行对象数组的分类。
具体实现:
// 对象数组根据id分组并转map
const arr = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'orange' },
  { id: 1, name: 'pear' },
  { id: 2, name: 'grape' }
];

const map = arr.reduce((acc, item) => {
  // 判断当前 id 在 map 对象是否已新建数组,如果没有,则新建一个空数组
  if (!acc.has(item.id)) {
    acc.set(item.id, []);
  }
  // 将当前元素推入对应的数组
  acc.get(item.id).push(item);
  return acc;
}, new Map());

console.log(map.get(1)); // [{ id: 1, name: 'apple' }, { id: 1, name: 'pear' }]
console.log(map.get(2)); // [{ id: 2, name: 'banana' }, { id: 2, name: 'grape' }]
console.log(map.get(3)); // [{ id: 3, name: 'orange' }]

// 遍历此map
for (const [key, value] of map.entries()) {
  console.log(`${key}: ${JSON.stringify(value)}`);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js中对象数组根据对象id分组并转map 的相关文章

随机推荐

  • 单调栈理解

    文章目录 单调栈 什么是单调栈 模拟实现一个单调栈 一些例题 视野总和 下一个最大元素 单调栈 什么是单调栈 从名字上就听的出来 单调栈中存放的数据应该是有序的 所以单调栈也分为单调递增栈和单调递减栈 单调递增栈 单调递增栈就是从栈底到栈顶
  • 常见猫咪种类

    文章目录 中华田园猫 猫图秀 概况 产地血统 毛色特征 形态特征 性格特征 近种区别 饲养特点 适养人群 英短 猫图秀 概况 产地血统 毛色特征 形态特征 性格特征 近种区别 饲养特点 适养人群 美短 猫图秀 概况 产地血统 毛色特征 形态
  • 双目标定(一)单目标定与矫正的基本介绍

    1 单目相机标定 首先 任何标定都是用基于小孔模型的数学模型去近似相机模型 我们需要用fx f dx fy f dy 图像坐标系中的光心原点坐标 和可能的缩放因子ks 这5个相机内参数 切向畸变参数和径向畸变参数 共5 N个参数来 近似 整
  • iOS 图片处理学习: 实现点九切图

    先来一个例子 一张图片 保留中间 拉伸两边 看效果 原始图片 easy 处理后 调用代码 view backgroundColor UIColor white let imgViewWidth CGFloat 300 let imgView
  • Gvim插件

    plugin 编程相关 公共 taglist 相信无人不知其大名 用来提供单个源代码文件的函数列表之类的功能 最近在使用一个针对面向对象语言的类似插件 tagbar vim 也很不错 NERD commenter 提供快速注释 反注释代码块
  • DeepChem预测小分子溶解度

    在药开发中 根据化学式预测小分子的溶解度 是开发药物小分子时要考虑的非常重要的性质 如果一种药物的溶解度不够 你可能无法将足够的药物输送到患者的血液中产生治疗效果 我们需要的第一件事是一个真实分子的测量溶解度的数据集 DeepChem的核心
  • [ctfshow]入门2

    目录 web14 默认配置 web15 社会工程学 web16 探针泄露 web17 sql备份 wed18 js小游戏 web19 数据库泄露 web20 mbd文件 杂项5 杂项6 杂项6 杂项7 杂项8 杂项10 杂项11 隐写1 隐
  • feign 序列化_自定义 feign 反序列化时间字符格式

    feign client 默认配置类 默认的配置类为FeignClientsConfiguration 配置了解码和编码 当请求Feign Client的方法执行时会被 SynchronousMethodHandler 类中的 invoke
  • 网络带宽单位转换 — MB/s、Mb/s、Mbps、Mbit/s、Kbps

    1 bit s 和 bps 的区别 bit s 和 bps 都是一样的意思 bit per second 2 KB s 和 Kb s 的区别 大写 B 和小写 b KB s 和 Kb s 的意思不一样 KB s 中的 大 B 表示 Byte
  • 通配符的应用

    我们使用通配符描述切入点 主要的目的就是简化之前的配置 具体都有哪些通配符可以使用 单个独立的任意符号 可以独立出现 也可以作为前缀或者后缀的匹配符出现 execution public com itheima UserService fi
  • Wireshark 解密https 数据

    默认情况下 wireshark 抓到的https 数据包都是加密后的 无法展示明文内容 方式一 SSLKEYLOGFILE 变量方式 推荐 适用各种情况 配置环境变量 浏览器在访问https 站点的时候会检测这个SSLKEYLOGFILE
  • java反射field.setAccessible()方法作用

    Accessable属性是继承自AccessibleObject 类 功能是启用或禁用安全检查 JDK API中的解释 引用AccessibleObject 类是 Field Method 和 Constructor 对象的基类 它提供了将
  • CSAPP习题思考(位操作)

    CSAPP习题思考 位操作 现在发现写技术方面的文章真是不容易 不像写随感文 随便热血一下两三个小时就出来了 这篇文章至少用了5 6个小时 但依然感觉没写到位 很多想说的却写不出来 想和说 写 是两种境界 所以每次看pongba洋洋散散五六
  • 开发人员的绝佳生产力工具

    介绍 从长远来看 每天工作 8 小时对您没有帮助 但利用这些来最大化产出肯定会让您受益 这就是为什么生产力是最重要的事情之一 今天 我们将学习一些很棒的工具 它们可以提高您的工作效率 除非并且直到您将这些工具集成到您的工作流程中 否则了解这
  • 宋浩线性代数笔记(七)线性空间

    完结撒花 致此该系列数一的内容也全部更完 本帖为宋浩老师基础课笔记的最后一期 后期会出一些课本经典例题 知识串联 抑或宋浩老师考研强化的重点 敬请期待下一些列
  • Java21天打卡Day6-switch

    import java util Scanner public class Day6 switch case语句 题目 输入一个号码 判断该号码 是1就是一等奖 2是二等奖 3是三等奖 其他的阳光普照奖 public static void
  • vue中使用swiper-slide时,循环轮播失效?

    前言 vue 项目中使用时 组件swiper slide 如果用v for循环的话 loop true 就不能无缝轮播 每次轮播到最后一张就停止了 正文 代码如下
  • java 判断用户是否关注了公众号

    1 获取token public String getToken try HttpClient client HttpClients createDefault String tokenUrl MessageFormat format ht
  • 有关NodeBB从低版本1.7.x升级到最新的1.16.x版本

    有关NodeBB升级历险记 公司线上的论坛网站一直都是1 7 4版本 而且有不少地方感觉用起来不是很顺手 就想着应该给它升升级了 从1 7 4升级到最新的1 16 x版本 注 不要直接跨版本升级到最高版本 会有数据错乱的问题 升级实操 备份
  • js中对象数组根据对象id分组并转map

    js中对象数组根据对象id分组并转map 如果要将具有相同 id 属性的对象元素 分成不同的数组 可以先从对象数组中提取相同的 id 属性 再使用 Array reduce 和 Map 来进行对象数组的分类 具体实现 对象数组根据id分组并