使用 filter 和 Map 根据键值去重

我来详细解释方法2,这是一种高效且简洁的数组去重方法,特别适合根据对象中的某个键值进行去重操作。

完整代码

function uniqueByKey(arr, key) {return [...new Map(arr.map(item => [item[key], item])).values()];
}

分步解析

让我们分解这个方法的每个步骤:

  1. arr.map(item => [item[key], item])

    • 遍历原始数组,为每个元素创建一个新数组

    • 新数组的第一个元素是对象的键值(item[key]

    • 第二个元素是对象本身(item

    • 例如,对于 {id: 1, name: 'John'},当 key 是 'id' 时,会变成 [1, {id: 1, name: 'John'}]

  2. new Map()

    • 将上一步生成的数组对传递给 Map 构造函数

    • Map 对象会自动处理键值对,当有相同的键时,后面的值会覆盖前面的值

    • 这是去重的关键步骤,因为 Map 的键必须是唯一的

  3. .values()

    • 获取 Map 中所有的值(即原始对象)

    • 这会返回一个 MapIterator 对象

  4. [... ]

    • 使用扩展运算符将 MapIterator 转换为普通数组

为什么这个方法有效?

  • Map 对象的特点是键必须是唯一的

  • 当我们把对象的键值作为 Map 的键,对象本身作为值时:

    • 如果遇到相同的键值,后面的对象会覆盖前面的对象

    • 最终 Map 中只保留每个键值的最后一个对象

  • 通过 values() 方法,我们只获取对象部分,忽略键

示例演示

假设我们有如下数组:

const data = [{id: 1, name: 'John'},{id: 2, name: 'Jane'},{id: 1, name: 'Johnny'},  // 重复的 id:1{id: 3, name: 'Alice'}
];

执行步骤:

  1. data.map(item => [item['id'], item]) 生成:

    [[1, {id: 1, name: 'John'}],[2, {id: 2, name: 'Jane'}],[1, {id: 1, name: 'Johnny'}],[3, {id: 3, name: 'Alice'}]
    ]
  2. new Map() 处理后:

    Map {1 => {id: 1, name: 'Johnny'},  // 后面的覆盖了前面的2 => {id: 2, name: 'Jane'},3 => {id: 3, name: 'Alice'}
    }
  3. .values() 获取:

    MapIterator {{id: 1, name: 'Johnny'},{id: 2, name: 'Jane'},{id: 3, name: 'Alice'}
    }
  4. [... ] 转换为数组:

    [{id: 1, name: 'Johnny'},{id: 2, name: 'Jane'},{id: 3, name: 'Alice'}
    ]

注意事项

  1. 保留最后一个重复项:这个方法会保留最后一个遇到的重复键值对象,而不是第一个

  2. 性能优势:对于大型数组,这种方法通常比其他方法(如使用 filter + find)性能更好,因为 Map 的查找操作是 O(1) 复杂度

  3. 键值类型:键值可以是任何类型,但会被 Map 转换为字符串形式进行比较

如果需要保留第一个遇到的重复项而不是最后一个,可以先将数组反转,处理后再反转回来:

function uniqueByKeyKeepFirst(arr, key) {return [...new Map([...arr].reverse().map(item => [item[key], item])).values()].reverse();
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/88252.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/88252.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/88252.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【机器学习笔记Ⅰ】9 特征缩放

特征缩放(Feature Scaling)详解 特征缩放是机器学习数据预处理的关键步骤,旨在将不同特征的数值范围统一到相近的尺度,从而加速模型训练、提升性能并避免某些特征主导模型。1. 为什么需要特征缩放? (1) 问题背景 量纲不…

10.9 大模型训练数据优化实战:3步让准确率从68%飙升至79%

大模型训练过程分析与数据优化 一、训练过程关键指标分析 (插入mermaid流程图:训练过程监控与优化闭环) #mermaid-svg-Gni031LkHA93fQYM {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-Gni031LkHA93fQYM .erro…

深度学习模型在C++平台的部署

一、概述深度学习模型能够在各种生产场景中发挥重要的作用,而深度学习模型往往在Python环境下完成训练,因而训练好的模型如何在生产环境下实现稳定可靠的部署,便是一个重要内容。C开发平台广泛存在于各种复杂的生产环境,随着业务效…

若以部署在linux,nginx反向代理,登录404,刷新404问题

history模式在router下面的index.js文件的最下面history: createWebHistory(import.meta.env.VITE_APP_CONTEXT_PATH),这两个配置文件都加上然后nginx里面的配置是这个位置按照实际情况,我的是用docker挂载的,所以在/usr/share/nginx/html/lw-clothing为…

SQL Server通过存储过程实现HTML页面生成

引言在现代企业应用中,数据可视化是提升决策效率的关键。SQL Server作为核心数据库管理系统,不仅处理数据存储和查询,还具备强大的扩展能力。通过存储过程直接生成HTML页面,企业能减少对中间层(如Web服务器或应用程序&…

qt绘制饼状图并实现点击即放大点击部分

做得比较low #ifndef TEST_POWER_H #define TEST_POWER_H#include <QWidget> #include <QtMath> #include <QPainter> #include <QPushButton> #include <QVector> #include <cmath>namespace Ui { class test_power; } struct PieData {Q…

HashMap的put、get方法详解(附源码)

put方法 HashMap 只提供了 put 用于添加元素&#xff0c;putVal 方法只是给 put 方法调用的一个方法&#xff0c;并没有提供给用户使用。 对 putVal 方法添加元素的分析如下&#xff1a;如果定位到的数组位置没有元素 就直接插入。如果定位到的数组位置有元素就和要插入的 key …

双立柱式带锯床cad【1张总图】+设计说明书+绛重

双立柱式带锯床 摘 要 随着机械制造技术的进步&#xff0c;制造业对于切割设备的精度、效率和稳定性要求越来越高。双立柱式带锯床作为一种重要的切割设备&#xff0c;必须能够满足工业生产对于高精度、高效率的需求。 双立柱式带锯床是一种重要的工业切割设备&#xff0c;其结…

在线JS解密加密配合ECC保护

在线JS解密加密配合ECC保护 1. ECC加密简介 定义 ECC&#xff08;Elliptic Curve Cryptography&#xff09;是一种基于椭圆曲线数学的公钥加密技术&#xff0c;利用椭圆曲线离散对数问题&#xff08;ECDLP&#xff09;实现高安全性。 背景 1985年&#xff1a;Koblitz&#xff0…

使用 Docker Compose 简化 INFINI Console 与 Easysearch 环境搭建

前言回顾 在上一篇文章《搭建持久化的 INFINI Console 与 Easysearch 容器环境》中&#xff0c;我们详细介绍了如何使用基础的 docker run 命令&#xff0c;手动启动和配置 INFINI Console (1.29.6) 和 INFINI Easysearch (1.13.0) 容器&#xff0c;并实现了关键数据的持久化&…

Word 怎么让段落对齐,行与行之间宽一点?

我们来分两步解决&#xff1a;段落对齐 和 调整行距。 这两个功能都集中在Word顶部的【开始】选项卡里的【段落】区域。 第一步&#xff1a;让段落对齐 “对齐”指的是段落的左右边缘如何排列。通常有四种方式。 操作方法&#xff1a;将鼠标光标点在你想修改的那个段落里的任意…

Attention机制完全解析:从原理到ChatGPT实战

一、Attention的本质与计算步骤 1.1 核心思想 动态聚焦&#xff1a;Attention是一种信息分配机制&#xff0c;让模型在处理输入时动态关注最重要的部分。类比&#xff1a;像人类阅读时用荧光笔标记关键句子。 1.2 计算三步曲&#xff08;以"吃苹果"为例&#xff09; …

2025年3月青少年电子学会等级考试 中小学生python编程等级考试三级真题答案解析(判断题)

博主推荐 所有考级比赛学习相关资料合集【推荐收藏】1、Python比赛 信息素养大赛Python编程挑战赛 蓝桥杯python选拔赛真题详解

HTML5 新特性详解:从语义化到多媒体的全面升级

很多小伙伴本都好奇&#xff1a;HTML5有什么功能是以前的HTML没有的&#xff1f; 今天就给大家说道说道 HTML5 作为 HTML 语言的新一代标准&#xff0c;带来了诸多革命性的新特性。这些特性不仅简化了前端开发流程&#xff0c;还大幅提升了网页的用户体验和功能性。本文将深入…

mac安装docker

1、下载docker-desktop https://www.docker.com/products/docker-desktop/2、安装&#xff0c;双击安装 3、优化docker配置 默认配置 cat ~/Library/Group\ Containers/group.com.docker/settings-store.json {"AutoStart": false,"DockerAppLaunchPath": …

mapbox进阶,绘制不随地图旋转的矩形,保证矩形长宽沿屏幕xy坐标方位

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️line线图层样式1.4 ☘️circle点图层样…

${project.basedir}延申出来的Maven内置的一些常用属性

如&#xff1a;${project.basedir} 是 Maven 的内置属性&#xff0c;可以被 pom.xml 直接识别。它表示当前项目的根目录&#xff08;即包含 pom.xml 文件的目录&#xff09;。 Maven 内置的一些常用属性&#xff1a; 项目相关&#xff1a; ${project.basedir} <!-- 项…

[特殊字符] Python 批量生成词云:读取词频 Excel + 自定义背景 + Excel to.png 流程解析

本文展示如何用 Python 从之前生成的词频 Excel 文件中读取词频数据&#xff0c;结合 wordcloud 和背景图&#xff0c;批量生成直观美观的词云图。适用于文本分析、内容展示、报告可视化等场景。 &#x1f4c2; 第一步&#xff1a;读取所有 Excel 词频文件 import os from ope…

模拟网络请求的C++类设计与实现

在C开发中&#xff0c;理解和模拟网络请求是学习客户端-服务器通信的重要一步。本文将详细介绍一个模拟HTTP网络请求的C类库设计&#xff0c;帮助开发者在不涉及实际网络编程的情况下&#xff0c;理解网络请求的核心概念和工作流程。 整体架构设计 这个模拟网络请求的类库主要由…

移动机器人的认知进化:Deepoc大模型重构寻迹本质

统光电寻迹技术已逼近物理极限。当TCRT5000传感器在强烈环境光下失效率超过37%&#xff0c;当PID控制器在路径交叉口产生63%的决策崩溃&#xff0c;工业界逐渐意识到&#xff1a;导引线束缚的不仅是车轮&#xff0c;更是机器智能的演化可能性。 ​技术破局点出现在具身认知架构…