JavaScript数组对象中重复ID如何处理并赋予不同值?

JavaScript数组对象中重复ID如何处理并赋予不同值?

巧妙解决javascript数组对象中重复id问题

本文提供一种高效的JavaScript方法,用于处理数组对象中重复的ID,并为具有相同ID的对象赋予不同的值。

假设我们有一个包含重复ID的数组对象:

const list = [  { id: 1, name: '小明' },  { id: 1, name: '小红' },  { id: 2, name: '小强' },  { id: 3, name: '小张' },  { id: 4, name: '小兰' },  { id: 1, name: '小青' },  { id: 4, name: '小青' }];

我们的目标是为每个重复ID的对象添加一个value属性,并赋予其不同的布尔值(true或false)。最终结果应如下所示:

const list = [  { id: 1, name: '小明', value: true },  { id: 1, name: '小红', value: false },  { id: 2, name: '小强' },  { id: 3, name: '小张' },  { id: 4, name: '小兰', value: true },  { id: 1, name: '小青', value: true },  { id: 4, name: '小青', value: false }];

为了实现这个目标,我们可以使用一个对象来跟踪ID的出现次数,并使用另一个对象记录每个ID已经赋予的值。

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

以下是实现代码:

const list = [  { id: 1, name: '小明' },  { id: 1, name: '小红' },  { id: 2, name: '小强' },  { id: 3, name: '小张' },  { id: 4, name: '小兰' },  { id: 1, name: '小青' },  { id: 4, name: '小青' }];const idCounts = {};const idValues = {};list.forEach(item => {  idCounts[item.id] = (idCounts[item.id] || 0) + 1;});list.forEach(item => {  if (idCounts[item.id] > 1) {    if (!idValues[item.id]) {      idValues[item.id] = true;    }    item.value = idValues[item.id];    idValues[item.id] = !idValues[item.id];  }});console.log(list);

这段代码首先统计每个ID出现的次数,然后遍历数组,为重复ID的对象添加value属性,并交替赋予true和false值。 idValues 对象保证了同一个ID的后续对象会得到不同的布尔值。 这种方法简洁高效,易于理解和维护。

以上就是JavaScript数组对象中重复ID如何处理并赋予不同值?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Element-UI水平菜单el-menu在PC端和移动端如何适配及调整标签大小?
上一篇 2025年12月22日 09:39:42
使用react-app-rewired构建项目时,如何避免代码压缩?
下一篇 2025年12月22日 09:39:56

相关推荐

  • 手把手教你合并SD卡和内部存储,让手机存储空间更大(一步步实现SD卡和内部存储的合并)

    随着手机功能的增强,我们对手机存储的需求不断增加,导致存储空间不足的问题频发。然而,许多手机的内部存储容量有限。为了解决这一难题,合并sd卡和内部存储是一种有效的方法,可以大幅增加手机存储空间。本教程将以详细步骤指导您完成sd卡和内部存储的合并,让您释放更多可用空间。请继续阅读,了解php小编苹果分…

    2026年8月25日
    000
  • 推荐一些具体的AI工具 豆包在线入口

    豆包是字节跳动推出的免费 AI 助手,提供多平台使用和登录方式。1. 豆包:字节跳动推出的免费 AI 助手,支持网页、iOS 和 Android 端,登录方式包括手机号和抖音账号,网页端入口为豆包官网。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模…

    2026年8月25日
    000
  • 抖音电商达人带货直播全攻略 | 快速提升销售业绩

    一、引言 近年来,随着短视频生态的不断成熟,抖音已逐渐成为电商营销的核心平台之一。越来越多的电商达人通过直播带货的形式,不仅能够全方位呈现商品信息,还能与用户即时沟通,显著提升转化效率。本文将系统梳理抖音电商达人如何高效开展带货直播,助力销量快速增长。 二、直播前的策划准备 精准选品 选品是直播成功…

    2026年8月25日
    100
  • win8怎么连接wifi网络_win8无线网络连接设置教程

    首先确认无线功能已开启,通过任务栏图标连接公开网络;若SSID隐藏,则需手动添加网络并输入SSID、安全类型及密码;也可通过Metro界面触控操作完成Wi-Fi连接设置。 如果您尝试连接到无线网络,但Windows 8设备无法成功接入,则可能是由于无线功能未开启或网络配置不正确。以下是解决此问题的多…

    2026年8月25日
    000
  • Linux下怎么查看MySQL版本

    1. 在终端下执行 mysql -V (注意V大写) 2. 在mysql 里查看 select version(); 3. 在mysql 里查看 status 以上就是Linux下怎么查看MySQL版本的详细内容,更多请关注创想鸟其它相关文章!

    2026年8月25日
    100
  • 电脑提示“steam_api.dll没有被指定在windows上运行”的4个方法

    电脑提示“steam_api.dll没有被指定在windows上运行”的4个方法电脑提示“steam_api.dll没有被指定在windows上运行”的4个方法电脑提示“steam_api.dll没有被指定在windows上运行”的4个方法电脑提示“steam_api.dll没有被指定在windows上运行”的4个方法

    在运行游戏或部分软件时,有时会弹出提示:“steam_api.dll未被指定在windows上运行,或文件已损坏。”这通常是因为dll文件丢失、版本不兼容,或系统缺少必要的运行环境。下面介绍几种简单有效的解决方式。 方法一:使用“星空运行库修复大师”自动修复(首选) 对于不太熟悉手动操作的用户来说,…

    2026年8月25日 用户投稿
    300
  • 褒贬不一 《夜莺传说》帧数测试

    褒贬不一 《夜莺传说》帧数测试褒贬不一 《夜莺传说》帧数测试褒贬不一 《夜莺传说》帧数测试褒贬不一 《夜莺传说》帧数测试

    上个月《夜莺传说》突然来了波反向跳票,本应该在 2 月 23 日上线的游戏提前两天,国内地区于北京时间 2 月 21 日抢先上线,并同步登陆 steam 和 epic 商店。作为一款开放世界游戏,《夜莺传说》集生存、建造、探索、战斗、制作等诸多要素于一体,不过发售了一个月,玩家对这款游戏的评价褒贬不…

    2026年8月25日 用户投稿
    500
  • 如何解决大型PHP应用中API客户端的依赖混乱与管理难题,Spryker/Guzzle模块助你一臂之力

    可以通过一下地址学习composer:学习地址 你是否也曾遇到过这样的场景:在一个大型的php项目中,你的应用需要与各种外部服务进行交互,比如支付网关、物流系统、crm平台等等。每个外部服务都需要一个http客户端来发送请求。起初,你可能直接在各个模块中引入并配置guzzle或其他http客户端,但…

    用户投稿 2026年8月25日
    000
  • 发行商Slitherine庆祝成立25周年 旗下三款名作限免发布

    发行商Slitherine庆祝成立25周年 旗下三款名作限免发布发行商Slitherine庆祝成立25周年 旗下三款名作限免发布发行商Slitherine庆祝成立25周年 旗下三款名作限免发布发行商Slitherine庆祝成立25周年 旗下三款名作限免发布

    slitherine games游戏工作室今日宣布,为庆祝公司成立25周年纪念日,旗下三款经典作品限时免费开放领取,感兴趣的玩家朋友可不要错过机会。 Slitherine:活动页面链接 本次提供免费的三款游戏如下: 《Battlestar Galactica Deadlock》 一款以知名美剧《太空…

    2026年8月25日 用户投稿
    000
  • 流明跟亮度有啥不同

    流明是光通量的物理单位,亮度是人眼对光线的主观感受。流明值越高,光源总发光量越大;亮度则受环境、色温等因素影响,体现实际视觉效果。 如果您在选购投影仪或手电筒时注意到“流明”和“亮度”这两个术语,可能会误以为它们表达的是同一个概念。实际上,流明是衡量光源输出光通量的物理单位,而亮度则是人眼对光线强弱…

    2026年8月25日
    200
  • 如何使用正则表达式完整匹配HTML中Script标签的中间内容?

    完整匹配Script标签中间内容的正则表达式 正则表达式是用于从文本中查找特定模式的高级工具。对于HTML中Script标签中间内容的匹配,需要一个特定的正则表达式来实现完整的匹配。 匹配表达式 /(<scriptb([^”]+|”[^”]*”)*>)([sS]*?)()/g 立即学习“…

    2025年12月24日
    2700
  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    2000
  • 如何用dom2img解决网页打印样式不显示的问题?

    用dom2img解决网页打印样式不显示的问题 想将网页以所见即打印的的效果呈现,需要采取一些措施,特别是在使用了bootstrap等大量采用外部css样式的框架时。 问题根源 在常规打印操作中,浏览器通常会忽略css样式等非必要的页面元素,导致打印出的结果与网页显示效果不一致。这是因为打印机制只识别…

    2025年12月24日
    1300
  • 如何用 CSS 模拟不影响其他元素的链接移入效果?

    如何模拟 css 中链接的移入效果 在 css 中,模拟移入到指定链接的效果尤为复杂,因为链接的移入效果不影响其他元素。要实现这种效果,最简单的方法是利用放大,例如使用 scale 或 transform 元素的 scale 属性。下面提供两种方法: scale 属性: .goods-item:ho…

    2025年12月24日
    900
  • 如何调整Flexbox布局中项目对齐方式?

    正文: 调整弹性盒子(Flexbox)布局中项目的对齐方式有几个方法: 文本对齐问题 对于第一个问题,即文字不在 中的问题,这是因为设置了 height 属性。Flexbox 子元素的高度被拉伸到了 height 规定的大小,因此文字无法正常显示在内容内。解决方案是移除 height 属性,让子元素…

    2025年12月24日
    800
  • 如何利用BFC和inline-block解决兄弟元素间margin塌陷问题?

    BFC清除兄弟元素间margin塌陷原理 margin塌陷问题 当相邻的块级元素垂直排列,它们的margin可能会塌陷并重叠,称为margin塌陷。 BFC清除margin塌陷 清除margin塌陷的一种常见方法是将下方元素包裹在一个新的块级格式化上下文(BFC)中,因为BFC之间不会相互影响。 d…

    2025年12月24日
    900
  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    600
  • PC端H5项目如何实现适配:流式布局、响应式设计和两套样式?

    PC端的适配方案及PC与H5兼顾的实现方案探讨 在开发H5项目时,常用的屏幕适配方案是postcss-pxtorem或postcss-px-to-viewport,通常基于iPhone 6标准作为设计稿。但对于PC端网项目,处理不同屏幕大小需要其他方案。 PC端屏幕适配方案 PC端屏幕适配一般采用流…

    2025年12月24日
    1000
  • CSS 元素设置 10em 和 transition 后为何没有放大效果?

    CSS 元素设置 10em 和 transition 后为何无放大效果? 你尝试设置了一个 .box 类,其中包含字体大小为 10em 和过渡持续时间为 2 秒的文本。当你载入到页面时,它没有像 YouTube 视频中那样产生放大效果。 原因可能在于你将 CSS 直接写在页面中 在你的代码示例中,C…

    2025年12月24日
    700
  • 如何实现类似横向U型步骤条的组件?

    横向U型步骤条寻求替代品 希望找到类似横向U型步骤条的组件或 CSS 实现。 潜在解决方案 根据给出的参考图片,类似的组件有: 图片所示组件:图片提供了组件的外观,但没有提供具体的实现方式。参考链接:提供的链接指向了 SegmentFault 上的另一个问题,其中可能包含相关的讨论或解决方案建议。 …

    2025年12月24日
    1100

发表回复

登录后才能评论
关注微信