【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')); // 输出: falsemap.clear();
console.log(map.size); // 输出: 0
获取键值对数量
可以使用 size 属性获取 Map 中键值对的数量:
console.log(map.size); // 输出: 2
遍历 Map
Map 提供了多种遍历方法,可以使用 for...of 循环或内置的遍历方法如 keys、values 和 entries:
const map = new Map([['name', 'Alice'],['age', 25]
]);for (let [key, value] of map) {console.log(`${key}: ${value}`);
}
// 输出:
// name: Alice
// age: 25for (let key of map.keys()) {console.log(key);
}
// 输出:
// name
// agefor (let value of map.values()) {console.log(value);
}
// 输出:
// Alice
// 25for (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 笔记
- 数据结构

相关文章:
【JavaScript】`Map` 数据结构
文章目录 一、Map 的基本概念二、常见操作三、与对象的对比四、实际应用场景 在现代 JavaScript 中,Map 是一种非常重要且强大的数据结构。与传统的对象(Object)不同,Map 允许您使用各种类型的值作为键,不限于字符串或…...
Ubuntu22.04使用NVM安装多版本Node.js和版本切换
Fabric官方目前支持Node.js开发区块链应用,建议使用Node长期支持版本(LTS)。 建议使用NVM安装Node.js,NVM可以帮助我们方便的在Node的不同版本之间进行切换,这样我们就可以同时工作在不同的项目上。 下面是安装的脚本…...
基于C51和OLED12864实现Goole小恐龙
在数字娱乐领域,Google小恐龙(T-Rex Runner)以其简单而上瘾的游戏机制赢得了广泛的关注和喜爱。这款内置于Chrome浏览器的离线小游戏,不仅为用户带来了乐趣,也激发了开发者们对其进行各种创新和扩展的灵感。本文将介绍…...
【Docker】CentOS7环境下的安装
环境展示 安装 配置仓库 sudo yum install -y yum-utils # docker官方key文件下载 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo # 建议使用阿里云key文件下载 sudo yum-config-manager --add-repo https://mirrors.aliyun.…...
浏览器的最大并发数(http1.1)
HTTP/1.1:每个资源请求通常需要单独的TCP连接,尽管支持Keep-Alive机制,允许在同一个TCP连接上连续发送多个请求。但通常浏览器限制并发TCP连接数(例如,每个域名最多6个并发连接)。 HTTP/2:引入…...
Android 开发中px、dpi 和 dp三个单位的介绍
Android 开发中px、dpi 和 dp三个单位的介绍 在 Android 开发中,px、dpi 和 dp 是用来描述屏幕尺寸和密度的单位,它们在设计和开发中有着不同的作用和用途。 1. px(像素) 定义: px 表示屏幕上的一个像素点,…...
zookeeper开启SASL权限认证
目录 一、SASL介绍 二、使用 SASL 进行身份验证 2.1 服务器到服务器的身份验证 2.2 客户端到服务器身份验证 三、验证功能 一、SASL介绍 默认情况下,ZooKeeper 不使用任何形式的身份验证并允许匿名连接。但是,它支持 Java 身份验证与授权服务(JAAS)…...
mysql一个小问题引发的思考-mysql类型转换-查询缓存 及 MYSQL查询缓存以及自动选择不使用查询缓存的情况
一、mysql一个小问题引发的思考-mysql类型转换-查询缓存 最近在做的一个项目中有一个SQL语句发现点问题,大概如下: select * from table where cid0 or find_in_set(1, cid); 数据表中的字段cid是字符串类型,原来的后端同学未提过此字段还能是…...
css更改图片颜色
css更改图片颜色,比较时候颜色单一的图片,比如logo之类的 css中的 filter 属性定义元素(通常是 <img>)的视觉效果(如模糊和饱和度) img{ -webkit-filter: invert(51%) sepia(94%) saturate(6433%) h…...
通过POST请求往Elastic批量插入数据
文章目录 引言I 请求文档请求参数请求例子引言 调试工具:Apifox 需求: 向Elasticsearch中的’test_index’索引批量插入文档 情况认证: Basic Auth 在 Header 添加参数 Authorization,其值为在 Basic 之后拼接空格,以及经过 Base64 编码的 {{Username}}:{{Password}} 示…...
JAW:一款针对客户端JavaScript的图形化安全分析框架
关于JAW JAW是一款针对客户端JavaScript的图形化安全分析框架,该工具基于esprima解析器和EsTree SpiderMonkey Spec实现其功能,广大研究人员可以使用该工具分析Web应用程序和基于JavaScript的客户端程序的安全性。 工具特性 1、动态可扩展的框架&#x…...
错误解决 error CS0117: ‘Buffer‘ does not contain a definition for ‘BlockCopy‘
Unity 2022.3.9f1 导入 Runtime OBJ Importer 后出现: error CS0117: ‘Buffer’ does not contain a definition for ‘BlockCopy’ 解决办法: 源代码: int DDS_HEADER_SIZE 128; byte[] dxtBytes new byte[ddsBytes.Length - DDS_HEAD…...
ICMPv6与DHCPv6之网络工程师软考中级
ICMPv6概述 ICMPv6是IPv6的基础协议之一。 在IPv6报文头部中,Next Header字段值为58则对应为ICMPv6报文。 ICMPv6报文用于通告相关信息或错误。 ICMPv6报文被广泛应用于其它协议中,包括NDP、Path MTU发现机制等 ICMPv6控制着IPv6中的地址自动配置、地址…...
【HTML — 构建网络】HTML 入门
在本文中,我们将介绍 HTML 的绝对基础知识。为了帮助您入门,本文定义了元素、属性以及您可能听说过的所有其他重要术语。它还解释了这些在 HTML 中的位置。您将学习 HTML 元素的结构、典型的 HTML 页面的结构以及其他重要的基本语言功能。在此过程中,也将有机会玩转 HTML! …...
javafx的ListView代入项目的使用
目录 1. 创建一个可观察的列表,用于存储ListView中的数据,这里的User是包装了用户的相关信息。 2.通过本人id获取friendid,及好友的id,然后用集合接送,更方便直观一点。 3.用for遍历集合,逐个添加。 4.渲染器&…...
基于ABAP OLE技术实现对服务器文件进行读写操作
使用ABAP中的OLE(Object Linking and Embedding)技术,可以实现对服务器文件的读写操作。以下是一个示例,演示如何通过ABAP代码使用OLE自动化对象来读写服务器上的文件。这里主要以Excel文件的读写操作为例。 1. 读Excel文件 代码…...
求教Postgresql在jdbc处理bit(1)字段的预处理解决方案
文章目录 1.建表语句:2.使用以下方式的预处理方式都报错了3.可以先用sql拼接实现功能 1.建表语句: CREATE TABLE public.h_user (id serial4 not null,username varchar(50) NULL,"password" varchar(64) NULL,nickname varchar(60) NULL,ema…...
微信小程序-自定义tabBar
通过官网给出的示例自己实现了自定义的tabBar,但结果发现 无法监听页面生命周期函数 结语:原想的是实现不一样的效果(如下) 故尝试了自定义tabBar,虽然做出来了,但也发现这个做法存在不足: 在…...
vue3+element-plus 实现动态菜单和动态路由的渲染
在 Vue.js 中,使用 Vue Router 管理路由数据,并将其用于渲染 el-menu(Element UI 的菜单组件)通常涉及以下几个步骤: 定义路由元数据: 在你的路由配置中,为每个路由项添加 meta 字段,…...
GO-学习-03-基本数据类型
数据类型:基本数据类型和复合数据类型 基本数据类型:整型、浮点型、布尔型、字符串 复合数据类型:数组、切片、结构体、函数、map、通道(channel)、接口 整型: package main import "fmt" im…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...
第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid,其中有多少个 3 3 的 “幻方” 子矩阵&am…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架,允许使用简单的变成模型跨计算机对大型集群进行分布式处理(1.海量的数据存储 2.海量数据的计算)Hadoop核心组件 hdfs(分布式文件存储系统)&a…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层(GATT/Adv)局限性: 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能,如 Configuration …...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链(Filter Chain),核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤: 用户提交登录请求拦…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅!
【把数组变成一棵树】有序数组秒变平衡BST,原来可以这么优雅! 🌱 前言:一棵树的浪漫,从数组开始说起 程序员的世界里,数组是最常见的基本结构之一,几乎每种语言、每种算法都少不了它。可你有没有想过,一组看似“线性排列”的有序数组,竟然可以**“长”成一棵平衡的二…...
