【JavaScript】`Map` 数据结构

文章目录

    • 一、`Map` 的基本概念
    • 二、常见操作
    • 三、与对象的对比
    • 四、实际应用场景

在现代 JavaScript 中,Map 是一种非常重要且强大的数据结构。与传统的对象(Object)不同,Map 允许您使用各种类型的值作为键,不限于字符串或符号。这为开发者提供了更多的灵活性和效率。本文将详细介绍 Map 的基本概念、用法、常见操作以及与对象的对比,帮助您全面掌握这一数据结构。

一、Map 的基本概念

Map 是一种键值对集合,其中键和值都可以是任意类型。Map 保留了键值对的插入顺序,且键是唯一的,这意味着在同一个 Map 中,键不能重复。

创建一个 Map

可以使用 Map 构造函数来创建一个新的 Map 实例:

const map = new Map();

也可以通过传入一个二维数组来初始化 Map,数组中的每个元素都是一个包含两个值的数组,分别表示键和值:

const map = new Map([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

二、常见操作

添加和获取元素

可以使用 set 方法添加键值对,使用 get 方法获取对应键的值:

const map = new Map();
map.set('name', 'Alice');
map.set('age', 25);

console.log(map.get('name')); // 输出: Alice
console.log(map.get('age')); // 输出: 25

检查键是否存在

可以使用 has 方法检查 Map 中是否存在某个键:

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

删除元素

可以使用 delete 方法删除某个键值对,使用 clear 方法删除所有键值对:

map.delete('age');
console.log(map.has('age')); // 输出: false

map.clear();
console.log(map.size); // 输出: 0

获取键值对数量

可以使用 size 属性获取 Map 中键值对的数量:

console.log(map.size); // 输出: 2

遍历 Map

Map 提供了多种遍历方法,可以使用 for...of 循环或内置的遍历方法如 keysvaluesentries

const map = new Map([
  ['name', 'Alice'],
  ['age', 25]
]);

for (let [key, value] of map) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 25

for (let key of map.keys()) {
  console.log(key);
}
// 输出:
// name
// age

for (let value of map.values()) {
  console.log(value);
}
// 输出:
// Alice
// 25

for (let [key, value] of map.entries()) {
  console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 25

三、与对象的对比

尽管 Map 和对象在某些方面类似,但它们在使用场景和性能上有一些显著区别。

键的类型

对象的键只能是字符串或符号,而 Map 的键可以是任意类型,包括对象、函数、基本类型等:

const obj = {};
const map = new Map();

obj['key'] = 'value';
map.set('key', 'value');

obj[{}] = 'value'; // 键会被转换为字符串 '[object Object]'
map.set({}, 'value'); // 键是对象的引用

遍历顺序

Map 按照插入顺序保留键值对,而对象的键的遍历顺序可能会根据不同的 JavaScript 引擎有所不同。

性能

对于频繁增删键值对的操作,Map 通常比对象更高效。对象适用于结构化的静态数据,而 Map 更适合需要动态操作的场景。

四、实际应用场景

缓存

Map 可以用于缓存数据,以提高应用程序的性能:

const cache = new Map();

function fetchData(key) {
  if (cache.has(key)) {
    return cache.get(key);
  } else {
    const data = getDataFromAPI(key); // 假设这是一个从 API 获取数据的函数
    cache.set(key, data);
    return data;
  }
}

计数

Map 适合用于对数据进行计数,如统计字符出现的次数:

const charCount = new Map();
const str = 'hello world';

for (let char of str) {
  if (charCount.has(char)) {
    charCount.set(char, charCount.get(char) + 1);
  } else {
    charCount.set(char, 1);
  }
}

console.log(charCount);
// 输出: Map { 'h' => 1, 'e' => 1, 'l' => 3, 'o' => 2, ' ' => 1, 'w' => 1, 'r' => 1, 'd' => 1 }

推荐我的相关专栏:

  • python 错误记录
  • python 笔记
  • 数据结构

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

DjangoRF实战-2-apps-users

1、用户模块 创建一个用户模块子应用,用来管理用户,和认证和授权。 1.1根目录创建apps, 为了使用方便,还需要再pycharm中设置一下资源路径,就可以自动提示 1.2注册子应用 1.3添加应用根目录到环境变量path python导…

7月21日,贪心练习

大家好呀,今天带来一些贪心算法的应用解题、 一,柠檬水找零 . - 力扣(LeetCode) 解析: 本题的贪心体现在对于20美元的处理上,我们总是优先把功能较少的10元作为找零,这样可以让5元用处更大 …

Golang实现免费天气预报获取(OpenWeatherMap)

最近接到公司的一个小需求,需要天气数据,所以就做了一个小接口,供前端调用 这些数据包括六个元素,如降水、风、大气压力、云量和温度。有了这些,你可以分析趋势,知道明天的数据来预测天气。 1.1 工具简介 …

Linux 安装 GDB (无Root 权限)

引入 在Linux系统中,如果你需要在集群或者远程操作没有root权限的机子,安装GDB(GNU调试器)可能会有些限制,因为通常安装新软件或更新系统文件需要管理员权限。下面我们介绍可以在没有root权限的情况下安装GDB&#xf…

vue3响应式用法(高阶性能优化)

文章目录 前言:一、 shallowRef()二、 triggerRef()三、 customRef()四、 shallowReactive()五、 toRaw()六、 markRaw()七、 shallowReadonly()小结: 前言: 翻别人代码时,总结发现极大部分使用vue3的人只会用ref和reactive处理响…

谷歌AI拿下IMO奥数银牌!6道题轻松解出4道~

本周四,谷歌DeepMind团队宣布了一项令人瞩目的成就::用 AI 做出了今年国际数学奥林匹克竞赛 IMO 的真题,并且距拿金牌仅一步之遥。这一成绩不仅标志着人工智能在数学推理领域的重大突破,也引发了全球范围内的广泛关注和…

时序分解 | Matlab基于CEEMDAN-CPO-VMD的CEEMDAN结合冠豪猪优化算法(CPO)优化VMD二次分解

时序分解 | Matlab基于CEEMDAN-CPO-VMD的CEEMDAN结合冠豪猪优化算法(CPO)优化VMD二次分解 目录 时序分解 | Matlab基于CEEMDAN-CPO-VMD的CEEMDAN结合冠豪猪优化算法(CPO)优化VMD二次分解效果一览基本介绍程序设计参考资料 效果一览…

leetcode-148. 排序链表

题目描述 给你链表的头结点 head ,请将其按 升序 排列并返回 排序后的链表 。 示例 1: 输入:head [4,2,1,3] 输出:[1,2,3,4]示例 2: 输入:head [-1,5,3,4,0] 输出:[-1,0,3,4,5]示例 3&#x…

UFO:革新Windows操作系统交互的UI聚焦代理

人工智能咨询培训老师叶梓 转载标明出处 人机交互的便捷性和效率直接影响着我们的工作和生活质量。尽管现代操作系统如Windows提供了丰富的图形用户界面(GUI),使得用户能够通过视觉和简单的点击操作来控制计算机,但随着应用程序功…

javaEE-04-Filter

文章目录 FilterFilter 的生命周期FilterConfig类FilterChain过滤器链Filter 的拦截路径 Filter Filter 过滤器它是 JavaWeb 的三大组件之一,它是 JavaEE 的规范。也就是接口,它的作用是:拦截请求,过滤响应。 Filter的工作流程图解: 以管…

HarmonyOS NEXT零基础入门到实战-第四部分

自定义组件: 概念: 由框架直接提供的称为 系统组件, 由开发者定义的称为 自定义组件。 源代码: Component struct MyCom { build() { Column() { Text(我是一个自定义组件) } } } Component struct MyHeader { build() { Row(…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第五十五章 Pinctrl和GPIO子系统实验

i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

神经网络拟合任何函数的数学原理

神经网络拟合任何函数的数学原理 神经网络拟合能力的数学表达 神经网络之所以理论上可以拟合任何函数,其核心在于其多层的结构和非线性的激活函数。通过增加层数和神经元数量,神经网络可以逼近复杂的函数关系。这一过程可以通过万能近似定理&#xff08…

Vue中的diff算法

文章目录 diff算法是什么比较方式源码分析patchpatchVnodeupdateChildren小结Vue3中diff算法优化diff算法是什么 diff算法是一种通过同层的树节点进行比较的高效算法 其有两个特点: 比较只会在同层级进行,不会跨层级比较在dff比较的过程中,循环从两边向中间比较(首位交叉…

24年第三届钉钉杯大学生大数据挑战赛浅析

需要完整资料,请关注WX:“小何数模”! 本次钉钉杯大数据挑战赛的赛题已正式出炉,无论是赛题难度还是认可度,该比赛都是仅次于数模国赛的独一档,可以用于国赛前的练手训练。考虑到大家解题实属不易&#xf…

LiRouter V3.0无人机自主精细化巡检 LiStation V3.0输电线路巡检数障处理分系统 软件下载License使用

PeacePower LiRouter 输电线路无人机自主巡检航线规划系统(本文档中简称 “LiRouter”),是基于高精度三维点云数据,在少量人工干预下为输电线路无人 机自主精细化巡检自动生成并输出航线的专业软件工具。 凭借在输电线路无人机智能…

04-数据库MySQL

一、项目要求 二、项目过程介绍 1、新建数据库 2、新建表 3、处理表 1.修改student 表中年龄(sage)字段属性,数据类型由int 改变为smallint 2.为Course表中Cno 课程号字段设置索引,并查看索引 3.为SC表建立按学号(sno)和课程号(cno)组合的升序的主键索引&#xf…

Vue使用FullCalendar实现日历/周历/月历

Vue使用FullCalendar实现日历/周历/月历 需求背景:项目上遇到新需求,要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色,一个工单内部,需要以不同颜色显示三个阶段。 效果图 日历 周历 月历 安装插件…

【分布式锁】Redission实现分布式锁

接着上一节,我们遇到了超卖的问题,并通过Redis实现分布式锁,进行了解决。本节 我将换一种方式实现分布式锁。 前提: nginx、redis、nacos 模块1: provider-and-consumer 端口 8023 模块2 rabbitmq-consumer 端口 8021 …

推荐几款支持AI剪辑并可使用个人视频素材的软件!

最强AI视频生成:小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频百万播放量 其实现在大部分的AI视频剪辑工具都可以实现一键成片,这里给你分享6款可以使用自己的素材实现AI剪辑的工具及其操作方法! 一、剪映 剪映…