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

【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 循环或内置的遍历方法如 keysvaluesentries

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 表示屏幕上的一个像素点&#xff0c…...

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更改图片颜色&#xff0c;比较时候颜色单一的图片&#xff0c;比如logo之类的 css中的 filter 属性定义元素&#xff08;通常是 <img>&#xff09;的视觉效果&#xff08;如模糊和饱和度&#xff09; 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的图形化安全分析框架&#xff0c;该工具基于esprima解析器和EsTree SpiderMonkey Spec实现其功能&#xff0c;广大研究人员可以使用该工具分析Web应用程序和基于JavaScript的客户端程序的安全性。 工具特性 1、动态可扩展的框架&#x…...

错误解决 error CS0117: ‘Buffer‘ does not contain a definition for ‘BlockCopy‘

Unity 2022.3.9f1 导入 Runtime OBJ Importer 后出现&#xff1a; error CS0117: ‘Buffer’ does not contain a definition for ‘BlockCopy’ 解决办法&#xff1a; 源代码&#xff1a; int DDS_HEADER_SIZE 128; byte[] dxtBytes new byte[ddsBytes.Length - DDS_HEAD…...

ICMPv6与DHCPv6之网络工程师软考中级

ICMPv6概述 ICMPv6是IPv6的基础协议之一。 在IPv6报文头部中&#xff0c;Next Header字段值为58则对应为ICMPv6报文。 ICMPv6报文用于通告相关信息或错误。 ICMPv6报文被广泛应用于其它协议中&#xff0c;包括NDP、Path MTU发现机制等 ICMPv6控制着IPv6中的地址自动配置、地址…...

【HTML — 构建网络】HTML 入门

在本文中,我们将介绍 HTML 的绝对基础知识。为了帮助您入门,本文定义了元素、属性以及您可能听说过的所有其他重要术语。它还解释了这些在 HTML 中的位置。您将学习 HTML 元素的结构、典型的 HTML 页面的结构以及其他重要的基本语言功能。在此过程中,也将有机会玩转 HTML! …...

javafx的ListView代入项目的使用

目录 1. 创建一个可观察的列表&#xff0c;用于存储ListView中的数据,这里的User是包装了用户的相关信息。 2.通过本人id获取friendid&#xff0c;及好友的id&#xff0c;然后用集合接送&#xff0c;更方便直观一点。 3.用for遍历集合&#xff0c;逐个添加。 4.渲染器&…...

基于ABAP OLE技术实现对服务器文件进行读写操作

使用ABAP中的OLE&#xff08;Object Linking and Embedding&#xff09;技术&#xff0c;可以实现对服务器文件的读写操作。以下是一个示例&#xff0c;演示如何通过ABAP代码使用OLE自动化对象来读写服务器上的文件。这里主要以Excel文件的读写操作为例。 1. 读Excel文件 代码…...

求教Postgresql在jdbc处理bit(1)字段的预处理解决方案

文章目录 1.建表语句&#xff1a;2.使用以下方式的预处理方式都报错了3.可以先用sql拼接实现功能 1.建表语句&#xff1a; CREATE TABLE public.h_user (id serial4 not null,username varchar(50) NULL,"password" varchar(64) NULL,nickname varchar(60) NULL,ema…...

微信小程序-自定义tabBar

通过官网给出的示例自己实现了自定义的tabBar&#xff0c;但结果发现 无法监听页面生命周期函数 结语&#xff1a;原想的是实现不一样的效果&#xff08;如下&#xff09; 故尝试了自定义tabBar&#xff0c;虽然做出来了&#xff0c;但也发现这个做法存在不足&#xff1a; 在…...

vue3+element-plus 实现动态菜单和动态路由的渲染

在 Vue.js 中&#xff0c;使用 Vue Router 管理路由数据&#xff0c;并将其用于渲染 el-menu&#xff08;Element UI 的菜单组件&#xff09;通常涉及以下几个步骤&#xff1a; 定义路由元数据&#xff1a; 在你的路由配置中&#xff0c;为每个路由项添加 meta 字段&#xff0c…...

GO-学习-03-基本数据类型

数据类型&#xff1a;基本数据类型和复合数据类型 基本数据类型&#xff1a;整型、浮点型、布尔型、字符串 复合数据类型&#xff1a;数组、切片、结构体、函数、map、通道&#xff08;channel&#xff09;、接口 整型&#xff1a; package main import "fmt" im…...

Pygame与MoviePy结合实战:打造动态视频游戏界面

1. 为什么需要Pygame与MoviePy结合&#xff1f; 很多游戏开发者在使用Pygame时都会遇到一个头疼的问题&#xff1a;视频播放功能。Pygame 2.0.0版本之后&#xff0c;官方移除了对视频模块的支持&#xff0c;这让很多想要在游戏中加入开场动画、过场CG或者动态背景的开发者感到束…...

CGAL-6.0.1在Win11与VS2019环境下的高效编译与配置指南

1. 环境准备&#xff1a;搭建Win11VS2019开发环境 在开始编译CGAL-6.0.1之前&#xff0c;我们需要确保开发环境配置正确。我实测发现&#xff0c;Win11系统与VS2019的组合存在一些特殊配置需求&#xff0c;这里分享几个关键检查点&#xff1a; 首先确认VS2019的安装组件。打开V…...

5分钟搞定ollama+qwen2.5模型配置:从下载到对话测试全流程指南

5分钟极速部署ollama与qwen2.5&#xff1a;零基础打造本地AI对话系统 在AI技术平民化的今天&#xff0c;拥有一个本地运行的对话模型不再是专业开发者的专利。本文将带您用最短时间完成ollama服务部署与qwen2.5模型配置&#xff0c;无需复杂环境搭建&#xff0c;从零开始构建属…...

Petalinux-build --sdk卡在assimp?手动下载源码并集成到Yocto构建系统的完整指南

解决Petalinux构建SDK时assimp源码下载失败的深度实践指南 当你在Ubuntu 18.04环境下使用Vivado 2021.2进行Petalinux开发时&#xff0c;执行petalinux-build --sdk命令可能会意外卡在assimp组件上。这种问题通常源于网络连接不稳定导致构建系统无法自动下载第三方依赖库。本文…...

OpenClaw终端增强:Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF实现命令行智能补全与解释

OpenClaw终端增强&#xff1a;Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF实现命令行智能补全与解释 1. 为什么需要智能终端助手 作为每天与终端打交道的开发者&#xff0c;我经常陷入这样的困境&#xff1a;面对复杂的docker compose命令需要反复查阅文档&#xf…...

Ubuntu20.04.2LTS下AutoDock4-GPU的编译优化与性能调优实战

1. 环境准备与CUDA版本选择 在Ubuntu20.04.2LTS上部署AutoDock4-GPU之前&#xff0c;最关键的就是搭建合适的CUDA环境。我遇到过不少因为CUDA版本不匹配导致的编译失败问题&#xff0c;这里分享几个实用经验。 首先检查你的GPU型号和驱动版本。以我的NVIDIA RTX 2080 Ti为例&am…...

小红书笔记API避坑指南:数据结构解析与常见错误排查

小红书笔记API避坑指南&#xff1a;数据结构解析与常见错误排查 在小红书生态中&#xff0c;API作为连接开发者与平台数据的桥梁&#xff0c;其重要性不言而喻。但许多开发者在实际调用过程中&#xff0c;常常陷入数据结构理解不透、错误排查效率低下的困境。本文将从小红书笔记…...

swoole方案 实时监控大盘推送中心

业务服务 --写--> Kafka ---> Swoole消费 --WebSocket推--> 浏览器ECharts实时刷新Kafka 当缓冲层&#xff0c;业务打点不管推送快不快&#xff0c;Swoole 从 Kafka 拉数据&#xff0c;有新数据就推给所有看板页面。---代码<?php// composer require longlang/php…...

JPEXS Free Flash Decompiler与Web3.0存储:去中心化SWF文件管理的终极指南

JPEXS Free Flash Decompiler与Web3.0存储&#xff1a;去中心化SWF文件管理的终极指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款功能强大的开源…...

MMSegmentation项目交付必备:如何生成让客户/导师眼前一亮的可视化报告(附完整脚本)

MMSegmentation项目交付必备&#xff1a;如何生成让客户/导师眼前一亮的可视化报告&#xff08;附完整脚本&#xff09; 在计算机视觉项目的最终交付环节&#xff0c;一份专业、直观的可视化报告往往比堆砌技术参数更能打动客户或导师。MMSegmentation作为开源图像分割领域的标…...