JavaScript数组对象:如何合并属性值相同的元素?

javascript数组对象:如何合并属性值相同的元素?

JavaScript数组对象:合并相同属性值的元素

本文介绍如何高效合并JavaScript数组中属性值相同的元素。 我们将使用reduce函数实现这一目标。

以下代码演示了如何将数组中groupId属性值相同的元素合并:

const arr = [  { title: '标题1', url: 'url', groupId: -1 },  { title: '标题2', url: 'url', groupId: 123 },  { title: '标题3', url: 'url', groupId: 123 },  { title: '标题4', url: 'url', groupId: -1 },  { title: '标题5', url: 'url', groupId: 456 },  { title: '标题6', url: 'url', groupId: 456 },  { title: '标题7', url: 'url', groupId: 789 },];const resArr = arr.reduce((previous, current) => {  const last = previous.length ? previous[previous.length - 1] : null;  if (current.groupId === -1) {    previous.push({ title: current.title, url: current.url }); // groupId为-1的元素单独处理  } else if (last && last.groupId === current.groupId) {    last.group.push({ title: current.title, url: current.url }); // 合并到已有组  } else {    previous.push({ groupId: current.groupId, group: [{ title: current.title, url: current.url }] }); // 创建新组  }  return previous;}, []);console.log(resArr);

代码逻辑:

立即学习“Java免费学习笔记(深入)”;

使用reduce函数迭代数组arrprevious数组存储合并后的结果。current表示当前迭代的元素。last表示previous数组的最后一个元素。如果current.groupId为-1,则直接添加到previous。如果last存在且last.groupIdcurrent.groupId相同,则将current添加到last.group数组中。否则,创建一个新对象,包含groupId和一个group数组(包含current),添加到previous

最终,resArr将包含合并后的数组。 此方法高效地处理了属性值相同的元素合并,并对groupId为-1的元素进行了特殊处理。

以上就是JavaScript数组对象:如何合并属性值相同的元素?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1501633.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 23:43:52
下一篇 2025年12月7日 23:49:32

相关推荐

  • Docker安装Redis报错:data_redis目录命名错误如何解决?

    Docker安装Redis报错:无效目录名 使用Docker命令安装Redis时,出现以下错误: docker: error response from daemon: create data_redis/redis.conf: “data_redis/redis.conf” includes in…

    2025年12月19日
    000
  • 异步请求中Referrer属性会丢失吗?

    探究异步请求中的Referrer属性 从网页B跳转到网页A,A页面发起异步请求时,Referrer属性是否会被携带?本文将对此进行深入探讨。 Referrer属性的工作机制 Referrer属性是HTTP请求头的一部分,指示请求的来源页面URL。通常,浏览器会在客户端发起请求时自动添加此属性。 异步…

    2025年12月19日
    000
  • Docker安装Redis报错:data_redis目录名无效怎么办?

    Docker安装Redis时遇到“data_redis目录名无效”错误 使用以下Docker命令安装Redis时,出现错误: docker run -v data_redis/redis.conf:/etc/redis/redis.conf -v data_redis/data:/data -d -…

    2025年12月19日
    000
  • 什么是TS中的浅副本和深拷贝

    深拷贝与浅拷贝详解 JavaScript 中复制对象或数组时,可以选择进行浅拷贝或深拷贝。理解两者差异至关重要,尤其在处理复杂数据结构时。 内存与引用机制 JavaScript 对象和数组是引用类型。将它们赋值给变量时,实际赋值的是内存地址,而非数据本身。 原始类型 (例如:字符串、数字、布尔值) …

    2025年12月19日
    000
  • TS中经常用于开发的数组方法

    本文介绍TypeScript Web开发中常用的数组方法,并附带示例和说明: 1. map() 用途: 创建一个新数组,新数组的每个元素都是原数组对应元素调用指定函数后的结果。用例: 数据转换,例如将数字数组转换为字符串数组。 2. filter() 用途: 创建一个新数组,新数组包含原数组中所有通…

    2025年12月19日
    000
  • 付款集成:使用OAuth进行安全令牌的身份验证

    Razorpay 付款集成:基于 OAuth 的安全访问 概述 本文介绍如何将 Razorpay 安全地集成到您的应用中,实现无缝的支付处理。Razorpay 支持基于 OAuth 的身份验证,允许应用安全地访问资源,无需泄露敏感凭据。我们将探讨 OAuth 如何确保 API 安全访问、令牌生成、处…

    2025年12月19日
    000
  • 网络监控市场有望在2亿美元达到2美元

    市场研究公司Credulous Research®发布的最新报告《网络监控市场——全球机遇分析与行业预测(2025-2032)》显示,全球网络监控市场预计将在2032年达到39亿美元,2025年至2032年的复合年增长率为7.3%。 报告指出,网络监控市场增长主要源于对解决停机问题的网络监控系统需求…

    2025年12月19日
    000
  • 边缘零信任(第3部分)

    利用JSON Web密钥集扩展JWT验证 上一篇文章中,我们学习了JSON Web令牌(JWT)的概念、创建方法和验证方式。第二部分则演示了如何在简单的Express服务器中使用JWT验证中间件。本篇将深入探讨非对称加密算法,特别是RS256算法,并重点介绍JSON Web密钥集(JWKS)。 术语…

    2025年12月19日
    000
  • 使用Seerbit接受多种货币:开发人员指南

    在全球化市场中,支持多种货币对企业吸引多元化客户至关重要。允许客户使用其偏好货币支付,不仅提升用户体验,还能显著提高交易转化率。 领先的支付网关 Seerbit Seerbit 提供强大的多货币功能,使企业能够流畅地处理来自全球各地的支付。Seerbit 的多货币功能: 支持的货币和地区 Seerb…

    2025年12月19日
    000
  • 洗手间的堡垒

    代码的出现2024第14天 第1部分 跟踪包装运动 在这里有很多事情要做。 > ,我相信我可以完成至少一颗金星。 我的任务似乎包括: 解析所有整数的输入生成机器人列表创建网格在modulo的帮助下,进程100移动的迭代确定每个象限的边界检查每个机器人并计算四个总和,每个象限>一个总和&g…

    2025年12月19日
    000
  • 与NextJS集成的Redsys介绍15

    如今,众多企业寻求在线盈利途径,例如SaaS、电商或其他网络应用。虽然Stripe和PayPal等全球支付平台普及,但不同国家/地区偏好各有不同。在西班牙,Redsys几乎主导所有在线银行交易。Redsys是一个基于SOAP API的平台,旨在简化和保障西班牙银行网络的数字支付。尽管功能强大,但其独…

    2025年12月19日
    000
  • 在不到两分钟的时间内旋转新铁路上的许可证密钥API!

    Railway 的新功能特性让部署单文件微服务变得轻而易举,无需管理基础设施或代码库。本文将演示如何使用 Hono、Redis 和 Bun 运行时,在一个文件中构建一个许可证 API。准备开始构建吧! 注意: Railway 功能非常适合处理小型任务,例如网络钩子、cron 作业或简单的 API。它…

    2025年12月19日
    000
  • 您是在犯这些Nodejs安全错误吗?

    介绍 >在2016年,当黑客通过利用私人github存储库中的暴露凭据访问其aws s3服务器时,uber面临严重的安全漏洞。该服务器包含5700万用户和60万驱动程序的敏感数据。违规发生是由于不良的访问控制和凭证管理在其node.js应用程序中。如果像uber这样的技术巨头可能会发生这种情况…

    好文分享 2025年12月19日
    000
  • 双向将信号输入对象值绑定为[(ngmodel)]

    最近,我遇到了这一挑战…重构形式成分的角度信号。 旧形式组件的工作原理: > 表单数据来自反应性状态服务>表单数据是对象>在将其传递给form component>之前,将其形式数据克隆到克隆之前表单组件通过一个基于经典的装饰 angular @input 接收表…

    2025年12月19日
    000
  • JavaScript对象魔术

    本文探讨JavaScript对象赋值的特性及其潜在问题,并提供解决方案。 对象赋值与引用: 以下代码片段演示了JavaScript对象赋值的机制: const person = { firstname: ‘ajay’, lastname: ‘kumar’, hobbies: [‘cricket’, …

    2025年12月19日
    000
  • 第三方图书馆的隐藏成本:当&#don&#t重新发明车轮&#错误

    程序员奉为圭臬的信条之一是“不要重复造轮子”。然而,如同软件开发中的许多绝对性断言一样,实际情况远比这复杂。本文将探讨引入看似便捷的npm包时,其成本可能远高于自行编写代码的情况。 免费代码的陷阱 我们都经历过:需要实现某个功能,恰好有一个npm包能完美胜任。它很流行,维护良好,只需npm inst…

    2025年12月19日
    000
  • 容器安全市场将达到2美元

    全球市场研究机构CrediculousResearch®发布的报告《集装箱安全市场——全球机遇分析与行业预测(2025-2032)》指出,到2032年,集装箱安全市场规模预计将达到127.5亿美元,2025年至2032年的复合年增长率为23.6%。 AI和ML技术在容器安全解决方案中的广泛应用、对云…

    2025年12月19日
    000
  • 使用开放的Web服务发布订阅消息传递

    本文将演示如何利用eyevinn开源云提供的开放式web服务构建一个发布/订阅消息传递(pub/sub)应用程序。pub/sub是一种异步通信模型,是构建可扩展和分布式系统的重要组成部分。我们将使用valkey,一个基于eyevinn开源云的开放式web服务,来实现此功能。 本教程将指导您完成以下步…

    2025年12月19日
    000
  • 浅副本和深副本

    浅拷贝与深拷贝:JavaScript 对象复制详解 本文深入探讨 javascript 中的浅拷贝和深拷贝,并通过示例代码清晰地展现两者之间的差异。理解这两种拷贝方式对于避免潜在的程序错误至关重要。 1. 浅拷贝 浅拷贝创建一个新对象,但只复制顶层属性。对于嵌套对象或数组,浅拷贝只复制其引用,而非创…

    2025年12月19日
    000
  • 保持用户的同步:与凸的实时协作

    我的创业公司stick,一款实时协作白板应用,灵感源于线下协作的便捷性。stick的开发过程既富有挑战性,也令人兴奋。在完成项目后,我积累了大量经验,涵盖用户同步、高效数据处理以及系统稳定性保障等方面。 实时协作的必要性 实时协作对现代工作流程至关重要,无论是头脑风暴、文档编辑还是代码调试,即时反馈…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信