当前位置： 首页 > news >正文

JavaScript数据结构-Map的使用

news 来源：原创 2025/9/18 16:55:19

在 JavaScript 中，Map 是 ES6 引入的一种新的数据结构，它类似于对象，也是键值对的集合，但 Map 的键可以是任意类型的值（对象、函数、基本类型等），而传统对象的键只能是字符串或 Symbol，并且Map保留了插入顺序。

一、Map 的特性

  • 键值对集合：存储键值对，类似对象
  • 键的多样性‌：键可以是任意数据类型（对象、函数、基本类型等），而不仅限于字符串或 Symbol。
  • 保留‌插入顺序：遍历时按插入顺序返回键值对
  • 直接获取大小‌：通过 size 属性快速获取元素数量
  • ‌支持‌迭代：原生支持 for…of、forEach 等遍历方式
  • 性能优化‌：在频繁增删键值对的场景下性能更优

二、创建 Map

1、‌创建一个空 Map

const emptySet = new Set();

2、创建一个带有初始键值对的 Map，通过二维数组初始化

const map2 = new Map([['name', '张三'],['age', 25],[1, '数字键'],[{}, '对象键']
]);

三、Map 的常用属性和方法

  • set() 添加元素

    const map = new Map();
map.set('name', '李四');
map.set(1, '数字一');
map.set({id: 1}, '对象键值');

  • get() 获取元素

    console.log(map.get('name')); // 李四
console.log(map.get(1));      // 数字一

  • has() 检查键是否存在

    console.log(map.has('name')); // true
console.log(map.has('address')); // false

  • delete() 删除元素

    map.delete('name');
console.log(map.has('name')); // false

  • clear() 清空 Map

    map.clear();
console.log(map.size); // 0

  • size属性 获取大小

    console.log(map.size); // 元素数量

四、遍历 Map

1、 for…of 循环

const map = new Map([['a', 1],['b', 2],['c', 3]
]);for (const [key, value] of map) {console.log(key, value);
}

2、forEach 方法

map.forEach((value, key) => {console.log(key, value);
});

3、获取迭代器

  • 获取键的迭代器 keys()

    for (const key of map.keys()) {console.log(key);
}

  • 获取值的迭代器 values()

    for (const value of map.values()) {console.log(value);
}

  • 获取键值对的迭代器 entries()
    返回一个包含 [key, value] 对的迭代器

    for (const [key, value] of map.entries()) {console.log(key, value);
}

五、Map 与 Object 的比较

特性MapObject
键的类型任意值String 或 Symbol
键的顺序插入顺序不一定
大小size属性手动计算
性能（频繁增删）更优一般
序列化不能直接JSON序列化可以直接序列化
默认键无有原型链上的键

六、与对象/数组的转换‌

1、对象转为Map‌

const obj = { a: 1, b: 2 };
const map = new Map(Object.entries(obj));

2、Map转为对象‌

const map = new Map([["a", 1], ["b", 2]]);
const obj = Object.fromEntries(map);

3、Map转为数组‌

console.log([...map]); // 转二维数组
console.log([...map.keys()]); // 所有键的数组

七、使用场景

  • 需要键不是字符串/符号时：比如要用对象作为键

  • 需要保持插入顺序时：Map 会记住键的原始插入顺序

  • 频繁增删键值对时：Map 性能更好

  • 需要知道数据大小时：Map 有 size 属性

八、使用示例

1、统计字符出现次数

function countChars(str) {const result = new Map();for (const char of str) {result.set(char, (result.get(char) || 0) + 1);}return result;
}const charCount = countChars('hello world');
console.log(charCount.get('o')); // 2

2、使用复杂对象作为键

const user1 = {id: 1, name: 'admin'};
const user2 = {id: 2, name: 'test'};const userMapData = new Map();
userMapData.set(user1, {roleCode: 'admin', createTime: '2025-04-09'});
userMapData.set(user2, {roleCode: 'user', createTime: '2025-04-09'});console.log(userMapData.get(user1).roleCode); // 'admin'

3、对象关联元数据
dom对象本身作为键存储额外数据，避免污染对象属性

const domMetadata = new Map();
const button = document.querySelector("#myButton");// 绑定点击次数元数据
domMetadata.set(button, { clickCount: 0 });button.addEventListener("click", () => {const metadata = domMetadata.get(button);metadata.clickCount++;console.log(`点击次数：${metadata.clickCount}`);
});

九、注意事项

1、对象作为键时： Map 的键是基于引用比较的，两个看起来相同的对象作为键是不同的

const map = new Map();
map.set({}, 'value1');
map.set({}, 'value2');
console.log(map.size, map.get({}));  // 2 undefined（不同引用）let obj = {};
map.set(obj, 'value3');
console.log(map.obj); // value3

2、 NaN 作为键时： 虽然 NaN !== NaN，但在 Map 中被视作同一键

map.set(NaN, 'not a number');
console.log(map.get(NaN)); // 'not a number'

Map 是一种强大且灵活的数据结构，通过灵活使用 Map，可以更高效地处理复杂键类型和有序键值对的场景，提升代码可读性和性能。

相关文章：

JavaScript数据结构-Map的使用

在 JavaScript 中，Map 是 ES6 引入的一种新的数据结构，它类似于对象，也是键值对的集合，但 Map 的键可以是任意类型的值（对象、函数、基本类型等），而传统对象的键只能是字符串或 Symbol&#xff…...

编程日记 2025/9/18 16:55:19

LeetCode面试经典150题

目录 力扣80. 删除有序数组中的重复项 II 代码解析 力扣274. H 指数 代码解析 力扣151. 反转字符串中的单词 解析代码 力扣12. 整数转罗马数字 解析代码 力扣28. 找出字符串中第一个匹配项的下标 解析代码1（暴力模拟） 解析代码2（K…...

编程日记 2025/9/12 19:18:52

mysql之等值连接8个实例

以下实例以常见的业务场景为例，使用 MySQL 语法，假设存在员工表（employees）、部门表（departments）、订单表（orders）、客户表（customers）等，来展示…...

编程日记 2025/9/17 2:27:42

C基础笔记_指针专题

一:C 和 C 偏爱使用指针的原因 1. 通过指针可以直接操作内存 C 和 C 是系统级编程语言，它们的设计目标之一是允许开发者直接与硬件交互并高效地管理资源。 指针的本质：指针本质上是一个存储内存地址的变量，它让程序员可以直接访问和操作内…...

编程日记 2025/9/17 14:18:20

GPT-SoVITS Windows 配置与推理笔记（自用）

GPT-SoVITS Windows 配置与推理笔记（自用） 这是给自己留的备份，方便下次查。Windows 端配置和推理为主，代码为核心，直接干货。 环境准备 系统：Windows 10/11Python：3.9（别用别的版…...

编程日记 2025/9/18 5:11:10

【设计模式】面向对象开发学习OOPC

PLOOC-裸机思维 PLOOC OOPC精要——撩开“对象”的神秘面纱 C/C面向对象编程之封装-KK 面向过程，本质是“顺序，循环，分支”面向对象，本质是“继承，封装，多态”参考的书籍：《UMLOOPC嵌入式C语言…...

编程日记 2025/8/27 0:22:54

LVGL开发指南

一、主流ARM开发UI界面库 主流ARM开发UI界面库的详细对比分析，从多个维度评估各库的适用场景： 1. 基础对比表 特性LVGLQt for MCUEmbedded WizardTouchGFXemWin许可证MIT开源商业商业商业(STM32免费)商业RAM最小需求16KB512KB64KB256KB50KBFlash占用64KB+1MB+200KB+500KB+1…...

编程日记 2025/9/11 16:38:09

linux shell looop循环写法

在 Linux Shell 中编写loop循环的常见方法有以下几种，适用于持续执行任务或监控场景： 1. while true 循环（最常用） while true; do# 循环体内的命令echo "Running..."sleep 1 # 避免 CPU 占用过高 done 终止方式&…...

编程日记 2025/9/16 7:56:19

【力扣hot100题】（075）数据流的中位数

一开始只建立了一个优先队列，每次查询中位数时都要遍历一遍于是喜提时间超限，看了答案才恍然大悟原来还有这么聪明的办法。 方法是建立两个优先队列，一个大根堆一个小根堆，大根堆记录较小的数，小根堆记录较大的数。 …...

编程日记 2025/9/6 9:47:45

蓝桥杯刷题总结 + 应赛技巧

当各位小伙伴们看到这篇文章的时候想必蓝桥杯也快开赛了，那么本篇文章博主就来总结一下一些蓝桥杯的应赛技巧，那么依旧先来走个流程 那么接下来我们分成几个板块进行总结 首先是一些基本语法 编程语言的基本语法 首先是数组，在存数据的时候…...

编程日记 2025/9/14 3:16:18

JetBrains Terminal 又发布新架构，Android Studio 将再次迎来新终端

不到一年的时间，JetBrains 又要对 Terminal 「大刀阔斧」，本次发布的新终端是重构后的全新的架构，而上一次终端大调整还是去年 8 月的 v2024.2 版本，并且在「Android Studio Ladybug | 2024.2.1」也被引入。 不知道你们用不用内置…...

编程日记 2025/9/15 0:28:34

怎么构造思维链数据？思维链提示工程的五大原则

我来为您翻译这篇关于思维链提示工程的文章，采用通俗易懂的中文表达： 思维链(CoT)提示工程是生成式AI(GenAI)中一种强大的方法，它能让模型通过逐步推理来解决复杂任务。通过构建引导模型思考过程的提示，思维链能提高输出的准确性…...

编程日记 2025/9/13 9:13:27

mongodb--用户管理

文章目录 MongoDB 用户管理1. 连接到 MongoDB2. 用户创建2.1 创建管理员用户2.2 创建特定数据库用户2.3 常用内置角色 3. 用户管理操作3.1 查看所有用户3.2 查看特定用户信息3.3 更新用户密码3.4 添加用户角色3.5 移除用户角色3.6 删除用户 4. 权限修改4.1 创建自定义角色4.2 将…...

编程日记 2025/9/6 15:29:24

2025年考OCP认证有用吗？

在数字化转型的浪潮中，数据库管理技术成为企业核心竞争力的基石。Oracle作为全球领先的数据库解决方案提供商，其OCP（Oracle Certified Professional）认证不仅是技术能力的权威背书，更是职业发展的强力引擎。以下从多个…...

编程日记 2025/9/12 9:14:42

川翔云电脑：D5 渲染摆脱硬件限制，云端高效创作

在设计领域，D5 渲染器凭借实时光追技术、高效工作流程及优质输出效果，成为设计师的得力工具。然而，其对高端 RTX 显卡的依赖，导致硬件成本高、本地性能受限及办公地点固定等问题，让不少创作者望而却步。 D5 渲染器的优…...

编程日记 2025/9/18 17:45:57

设计模式（23种设计模式简介）

设计模式 简介 设计模式是解决软件设计中常见问题的可重用解决方案模板，通过总结反复验证的代码设计经验，提升代码的可重用性、可维护性和扩展性。其核心是通过标准化的设计思想，让代码更易理解、协作更高效，并在面向对象编程中…...

编程日记 2025/9/7 7:26:42

Python设计模式：工厂模式

1. 什么是工厂模式？ 工厂模式是一种创建对象的设计模式，它提供了一种创建对象的接口，但不暴露对象创建的具体逻辑。工厂模式的核心思想是将对象的创建与使用分离，从而提高代码的灵活性和可维护性。 1.1 工厂模式的类型 1.1.1 简…...

编程日记 2025/9/16 1:58:47

UE5 给函数分类

如果函数太多不方便找，我们可以给函数设置一个分组 选中一个函数，修改它的类别 然后在函数列表里可以看到分好的类 其他函数可以直接拖进类别里，不用每个函数都手动设置类别 一次只能拖动一个函数...

编程日记 2025/9/15 4:47:08

5️⃣ Coze+AI应用基础教学（2025年全新版本）

目录 一、了解应用开发 1.1 扣子应用能做什么 1.2 开发流程 1.3 开发环境 二、快速搭建一个AI应用 2.1 AI翻译应用介绍 2.2 设计你的应用功能 2.3 创建 AI 应用项目 2.4 编写业务逻辑（新建工作流） 2.5 搭建用户界面 2.6 效果测试 2.7 发布应…...

编程日记 2025/9/4 19:20:26

高级前端题库

前端题库 JS篇 如何理解作用域和作用域链 作用域 作用域就是变量或函数在其内能够被访问的“可见区域” 全局作用域局部作用域 作用域链 当在某个作用域中尝试访问一个变量时，JS引擎会从当前作用域开始，沿着作用域链向上逐级开始查找，直到…...

编程日记 2025/9/7 5:49:25

博途 TIA Portal之1200做主站与汇川EASY的TCP通讯

前言，虽然已经做了几篇关于TCP通讯的文章，但是不同的PLC之间的配合可能不同，下面将演示这种差异。 关于汇川EASY做从站的配置请参见下方链接文章：汇川EASY系列之以太网通讯（套接字socket做从站）_汇川以太网tcp套接字fb块-CSDN博客 1、硬件准备： 1200PLC，汇川EASY320…...

编程日记 2025/9/3 22:48:17

在conda虚拟环境安装GIT并且克隆github上项目指南（解决443问题）

此次笔记记录自己在conda虚拟环境安装git，同时克隆github项目，并且解决了git的443问题。 如有不妥欢迎各位大佬批评指正。 首先默认你已经安装了anaconda。 代开命令提示行 配置环境 #首先创建虚拟环境 conda create -n git_env python3.8 #激活虚拟环…...

编程日记 2025/9/15 15:44:49

JavaWeb遇到的问题汇总

问题一：（键值对最后一项没有逗号） 在JSON字符串转自定义对象和自定义对象转JSON字符串时： 如图所示：若忘记删除键值对的最后一项没有逗号时，则下一句转换不会生效，应该删除最后一项的逗号。 解…...

编程日记 2025/9/14 20:33:21

Stable Diffusion + Contronet，调参实现LPIPS最优(带生成效果+指标对比)——项目学习记录

目录 前言 一、数据集：图像文本，部分选取于DeepFashion 二、优化一，img2img 三、优化二，微调sd参数 四、优化三，dreamshaper优化 五、优化四，sdv1.5contronet 六、问题探索历程 1. 从 SDXL 到轻量化模…...

编程日记 2025/9/11 13:38:00

【“星睿O6”AI PC开发套件评测】在O6开发板使用gemma-2b测试CPU性能

前提条件： x64 Linux 主机：安装CMake 和 arm-gnu-toolchain-12.2.rel1-x86_64-aarch64-none-linux-gnu radxa O6主机 1.从 Kaggle 获取模型权重和分词器 Gemma 3 2B 模型文件：访问 Kaggle 上的 Gemma 模型页面 https://www.kaggle.com/mode…...

编程日记 2025/9/16 3:44:52

数学知识——矩阵乘法

使用矩阵快速幂优化递推问题 对于一个递推问题，如递推式的每一项系数都为常数，我们可以使用矩阵快速幂来对算法进行优化。 一般形式为： F n F 1 A n − 1 F_nF_1A^{n-1} Fn​F1​An−1 由于递推式的每一项系数都为常数，因此对…...

编程日记 2025/9/15 0:05:38

3DMax中模型解组

1、从网上下载下来的模型是一个整体，需要解开查看每个样式 2、解开组...

编程日记 2025/9/8 2:17:24

链路聚合+vrrp

1.链路聚合 作用注意事项将多个物理接口（线路）逻辑上绑定在一起形成一条逻辑链路，起到叠加带宽的作用1.聚合接口必须转发速率一致。2.聚合设备两端必须一致 配置命令 方法一 [Huawei]interface Eth-Trunk 0----先创建聚合接口，…...

编程日记 2025/9/8 18:19:31

0 std::process::Command 介绍

std::process::Command 是 Rust 标准库中用于创建和配置子进程的主要类型。它允许你启动新的进程、设置其参数和环境变量、重定向输入/输出等。 基本用法 use std::process::Command;let output Command::new("echo").arg("Hello, world!").output().ex…...

编程日记 2025/9/11 3:46:20

Android 中Intent 相关问题

在回答 Intent 问题时，清晰区分其 定义、类型 和 应用场景。以下是的回答策略： 一、Intent 的核心定义 Intent 是 Android 系统中的 消息传递对象，主要用于三大场景： 2. 隐式 Intent（Implicit Intent） 三、…...

编程日记 2025/9/16 1:58:50

【Docker】Docker Desktop镜像存储路径设置方法

在 Docker Desktop 中设置镜像存储路径（即下载的镜像文件存放位置）取决于你的操作系统。以下是不同系统下的设置方法： Windows 系统 完全卸载后重新安装指定路径（Docker Desktop for Windows 默认使用 C:\ProgramData\Docker&…...

编程日记 2025/9/14 23:31:37

Spring Boot 3.x 中 WebClient 全面详解及示例

Spring Boot 3.x 中 WebClient 全面详解及示例 1. WebClient 简介 定义：Spring 5 引入的响应式 HTTP 客户端，用于替代 RestTemplate（已弃用），支持异步非阻塞的 HTTP 请求。核心特性： 支持所有 HTTP 方法&a…...

编程日记 2025/9/13 12:59:09

将图片按照指定大小批量进行裁剪(可设置步长_python)

将图片按照指定大小批量进行裁剪(可设置步长_python) import os from PIL import Image# 设置更高的图像大小限制，禁用解压炸弹检查 Image.MAX_IMAGE_PIXELS None # 禁用解压炸弹检查def crop_image(image_path, block_size(640, 640), step_size(340, 340)):# 打…...

编程日记 2025/9/15 4:06:01

设计模式 --- 原型模式

原型模式是创建型模式的一种，是在一个原型的基础上，建立一致的复制对象的方式。这个原型通常是我们在应用程序生命周期中需要创建多次的一个典型对象。为了避免初始化新对象潜在的性能开销，我们可以使用原型模式来建立一个非常类似于复印机的…...

编程日记 2025/9/8 8:34:18

工作经验记录

坑 部门例会上:跨级暴露问题.部门例会上:说话没有条理,周报写得好,但是表达效果不同.领导直接要求的任务没有当时推进:需考虑GTD清单.不要马后炮领导签字要按顺序 会议上 发言有条理问题不要越级暴露不要强调过程 对同事 对领导 领导同意的文件最好当日通过. 对供应商 不…...

编程日记 2025/9/17 21:41:28

Unity中基于2.5D的碰撞系统

在2.5D游戏中实现精确的碰撞检测是一个关键挑战，因为我们需要在视觉上有深度感的同时保持游戏逻辑的准确性。下面我将详细解析2.5D碰撞系统的实现方法。 1. 2.5D碰撞的核心问题 1.1 Z轴深度与碰撞的关系 视觉表现：物体通过Y轴位置影响Z轴排序&#xff…...

编程日记 2025/9/14 5:20:48

设计模式-命令模式详解

命令模式详解及真实场景解决方案 模式定义 命令模式是一种行为设计模式，将请求封装为独立对象，包含执行操作所需的所有信息。通过这种方式，可以实现请求的参数化、队列管理、撤销/重做等高级功能，同时解耦请求发送者与接收者。 …...

编程日记 2025/9/18 17:29:15

基于Python（Django）+SQLite 实现（Web） 点菜管理系统

点菜管理系统 课程设计任务与要求 1、任务 题目：点菜管理信息系统 问题描述： 随着网络的迅速发展，越来越多的人开始接受甚至时依赖了网络营业的这种交易形式，传统的点菜模式不仅浪费时间，效率低下，而且…...

编程日记 2025/9/11 21:23:21

泰鸿万立上市：加强产品规划和前瞻性研发 打造优质汽车零部件制造商

4月9日，浙江泰鸿万立科技股份有限公司（股票简称“泰鸿万立”，股票代码“603210”）正式登陆上交所主板。 招股书显示，泰鸿万立主营业务为汽车结构件、功能件的研发、生产与销售。经过十余年发展，公司拥有了…...

编程日记 2025/9/11 9:38:12

Charles的安装和使用教程

Charles抓包工具与Sniff Master在Windows上的安装与使用指南 1. Charles抓包工具安装 1.1 下载Charles 进入Charles官网(https://www.charlesproxy.com/download/)下载最新版本的安装包 1.2 安装与激活 正常安装后，打开会提示试用版30天限制进入授权码生成页面…...

编程日记 2025/9/16 1:58:53

论文阅读笔记：Adaptive Multi-Modal Cross-Entropy Loss for Stereo Matching

论文阅读笔记：Adaptive Multi-Modal Cross-Entropy Loss for Stereo Matching 1 背景2 创新点3 方法4 模块4.1 基础和问题描述4.2 自适应多模态概率模型4.3 主模态视差估计器 5 效果6 结论 1 背景 尽管深度学习在立体匹配方面取得了巨大成功，但恢复准确…...

编程日记 2025/9/10 6:02:40

JavaScript学习教程，从入门到精通，JavaScript 运算符及语法知识点详解（8）

JavaScript 运算符及语法知识点详解 一、JavaScript 运算符 1. 算术运算符 用于执行数学运算： 加法- 减法* 乘法/ 除法% 取模（余数） 递增-- 递减** 幂运算（ES6） let a 10, b 3; console.log(a b); // 13 conso…...

编程日记 2025/9/11 13:53:01

聊聊Spring AI的ETL Pipeline

序 本文主要研究一下Spring AI的ETL Pipeline DocumentReader org/springframework/ai/document/DocumentReader.java public interface DocumentReader extends Supplier<List<Document>> {default List<Document> read() {return get();}}有TextReader…...

编程日记 2025/9/7 16:49:57

spark架构和RDD相关概念

运行架构&#xff1a; Spark采用master - slave结构&#xff0c;Driver作为master负责作业任务调度&#xff0c;Executor作为slave负责实际执行任务。 核心组件 Driver&#xff1a;执行Spark任务的main方法&#xff0c;将用户程序转化为作业&#xff0c;在Executor间调度任务&…...

编程日记 2025/9/5 17:37:40

Cloud Kernel SIG 季度动态：发布ANCK 6.6-003版本，支持一测多证

Cloud Kernel SIG&#xff08;Special Interest Group&#xff09;&#xff1a;支撑龙蜥内核版本的研发、发布和服务&#xff0c;提供生产可用的高性价比内核产品。 01 SIG 整体进展 发布 ANCK 6.6-003 版本。 一测多证流程建立。 OOT 驱动基线更新。 海光平台适配进展更新…...

编程日记 2025/9/12 23:04:19

【11】数据结构之基于线性表的查找算法

目录标题 平均查找长度ASL(Average Search Length)顺序表查找法折半查找法索引顺序查找法 平均查找长度ASL(Average Search Length) 定义&#xff1a;为确定元素在列表中的位置&#xff0c;需要和给定值进行比较的关键字个数的期望值&#xff0c;称之为查找算法成功时的平均查…...

编程日记 2025/9/13 14:50:50

铼赛智能Edge mini斩获2025法国设计大奖 | 重新定义数字化齿科美学

铼赛智能&#xff08;RAYSHAPE&#xff09;革命性新品——椅旁3D打印机Edge mini荣获2025年法国设计奖&#xff08;FRENCH DESIGN AWARDS&#xff0c;简称FDA&#xff09;产品设计类大奖。作为全球工业设计领域最具影响力的奖项之一&#xff0c;这一殊荣不仅是对产品极简美学的…...

编程日记 2025/9/5 18:37:46

成为一种国家战略范畴的新基建的智慧园区开源了

智慧园区场景视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。用户只需在界…...

编程日记 2025/8/31 20:24:55

Codeforces Round 1016 (Div. 3)题解

题目地址 https://codeforces.com/contest/2093 锐评 在所有题意都理解正确的情况下&#xff0c;整体难度不算太难。但是偏偏存在F这么恶心的题意&#xff0c;样例都不带解释一下的&#xff0c;根本看不懂题。D题也恶心&#xff0c;在于递归过程的拆分&#xff0c;需要点数学…...

编程日记 2025/9/16 5:08:01

安全理念和安全产品发展史

从安全理念的发展历史来看，技术与产品的演进始终围绕 “威胁对抗” 与 “业务适配” 两大核心展开。以下从七个关键阶段解析安全技术与产品的发展脉络，并结合最新实践与未来趋势提供深度洞察： 一、密码学奠基阶段（1970s 前） 安全理念：以 “信息保密” 为核心，防御手段…...

编程日记 2025/9/17 15:59:20