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

JavaScript 中的 Map方法

news 来源：原创 2025/6/24 16:28:48

JavaScript 中的 Map方法

在 JavaScript 中，Map 是一种用于存储键值对的数据结构，相较于传统的对象（Object），Map 提供了更高效的键值对操作方式适合处理需要频繁操作键值对的场景。

1. 创建 Map

const map = new Map();

2、常用方法

2.1 添加键值对set(key, value)

如果键已经存在，set 会更新其值

map.set("name", "rose");
map.set("age", 20);
map.set("name", "jack");
console.log(map); // 输出 Map(2) { 'name' => 'jack', 'age' => 20 }

2.2 取指定键的值get(key)

如果键不存在，返回 undefined

const map=new Map()
map.set("name", "rose");
map.set("age", 20);
console.log(map.get("name"))//rose
console.log(map.get("id"))//undefined

2.3 检查 Map 中是否存在指定的键has(key)

返回值为返回 true 或 false。

const map=new Map()
map.set("name", "rose");
map.set("age", 20);
console.log(map.has("name"))//true
console.log(map.has("id"))//false

2.4 删除指定的键值对delete（key）

返回 true 如果成功删除，否则返回 false

const map=new Map()
map.set("name", "rose");
map.set("age", 20);
var res=map.delete("name")
console.log(res)//true
var res2=map.delete("id")
console.log(res2)//false

2.5 清空Map clear()

删除所有键值对。

map.clear();
console.log(map); // 输出 Map(0) {}

2.6 返回 Map 中键值对的数量size

const map=new Map()
map.set("name", "rose");
map.set("age", 20);
console.log(map.size)//2

3、迭代方法

3.1forEach(callback)

遍历 Map 中的每一个键值对，callback 函数接受三个参数：值、键、Map 本身。

map.forEach((value, key) => {console.log(`${key}: ${value}`);
});
// 输出:
// name: Alice
// age: 25

3.2 返回 Map 中所有键的迭代器（Iterator）keys()

可以用 for…of 来遍历。

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

3.3 返回 Map 中所有值的迭代器（Iteratorvalues()

const map=new Map()
map.set("name", "rose");
map.set("age", 20);
for(let value of map.values()){console.log(value)
}
//rose 20

3.4 返回 Map 中所有键值对的迭代器entries()

每个键值对会以 [key, value] 的形式返回。

const map=new Map()
map.set("name", "rose");
map.set("age", 20);
for(let entry of map.entries()){console.log(entry)
}
//[ 'name', 'rose' ]
//[ 'age', 20 ]

应用小栗子

编写一个类，它允许获取和设置键-值对，并且每个键都有一个过期时间。

该类有三个公共方法：

set(key, value, duration) ：接收参数为整型键 key 、整型值 value 和以毫秒为单位的持续时间 duration 。一旦 duration 到期后，这个键就无法访问。如果相同的未过期键已经存在，该方法将返回 true ，否则返回 false 。如果该键已经存在，则它的值和持续时间都应该被覆盖。

get(key) ：如果存在一个未过期的键，它应该返回这个键相关的值。否则返回 -1 。

count() ：返回未过期键的总数。

在这里插入图片描述

function TimeLimitedCache() {this.cache = new Map();
}TimeLimitedCache.prototype.set = function(key, value, duration) {const valueInCache = this.cache.get(key);if (valueInCache) {clearTimeout(valueInCache.timeout);}const timeout = setTimeout(() => this.cache.delete(key), duration);this.cache.set(key, { value, timeout });return Boolean(valueInCache);
}TimeLimitedCache.prototype.get = function(key) {return this.cache.has(key) ? this.cache.get(key).value : -1;
}TimeLimitedCache.prototype.count = function() {return this.cache.size;
}

题目来自leecode：有时间限制的缓存https://leetcode.cn/problems/cache-with-time-limit/description/

JavaScript 中的 Map方法

JavaScript 中的 Map方法在 JavaScript 中，Map 是一种用于存储键值对的数据结构，相较于传统的对象（Object），Map 提供了更高效的键值对操作方式适合处理需要频繁操作键值对的场景。 1. 创建 Map const map new Map…...

编程日记 2025/6/24 16:28:48

img引入svg如何修改颜色

方法1：通过css中filter:drop-shadow 首先需要一个容纳图标的父盒子(下方实例中的.svg-img)，通过css造一个图标的‘影子’（.svg-color中的drop-shadow），然后设置‘影子’的颜色，再把图标本体移出父盒子&…...

编程日记 2025/6/20 5:15:23

自然语言处理基础及应用场景

自然语言处理定义让计算机理解人所说的文本语音 Imitation Game 图灵测试行为主义鸭子理论自然语言处理的基本任务词性标注：区分每个词名词、动词、形容词等词性命名实体的识别：名词的具体指代是哪一类事物共指消解：代词指代的是前面…...

编程日记 2025/6/24 16:17:22

构建centos docker基础镜像

1、介绍比较老的版本docker镜像，不太好找，可以尝试自己构建各版本构建基础镜像方法不太一样，方式也不同，自己尝试，本文只介绍了我自己的尝试 2、构建centos5.11 docker镜像准备iso文件 （1）安…...

编程日记 2025/6/21 10:37:01

etcd命令大全

默认安装自带etcdctl 命令行客户端，分两个版本ETCDCTL_API2和ETCDCTL_API3，两个版本不一样，操作的数据也不相容。本文以v3 为例。使用之前需要先设置：export ETCDCTL_API3。 1 etcd查询集群节点列表及状态标准输出&#xff1…...

编程日记 2025/6/23 19:34:26

Go有限状态机实现和实战

Go有限状态机实现和实战有限状态机什么是状态机有限状态机（Finite State Machine, FSM）是一种用于建模系统行为的计算模型，它包含有限数量的状态，并通过事件或条件实现状态之间的转换。FSM的状态数量是有限的，因此称…...

编程日记 2025/6/24 16:14:25

使用torch模型BMM int8计算。模拟：BMM->softmax->BMM 计算流程 import torch import numpy as np torch.manual_seed(777) def int8_quantize_per_token(x: torch.Tensor, axis: int -1, attnsFalse):if x.dtype ! torch.float32:x x.type(torch.float32)…...

编程日记 2025/5/30 22:45:21

vue3的watch一次性监听多个值用法

vue3的watch一次性监听多个值 1、监听单个值 watch(() > route.params.keyword, (newValue, oldValue) > {console.log(监听值变化, newVal, oldVal)state.a newValue});2、监听多个值 watch(() > [route.params.id, route.params.keyword], (newValue, oldValue) &g…...

编程日记 2025/6/20 18:03:41

【one-api和ollama结合使用】

将Ollama接入one-api one-api是一个开源AI中间件服务，可以聚合各家大模型API，比如OpenAI、ChatGLM、文心一言等，聚合后提供统一的OpenAI调用方法。举个例子：ChatGLM和文心一言的API调用方法并不相同，one-api可以对其进…...

编程日记 2025/6/21 21:07:45

Oracle PDB的开启和关闭

[生产环境关闭与开启Oracle PDB] 【运维场景】在运维Oracle PDB的时候经常要开启和关闭PDB，对关闭和开启PDB的操作要非常熟悉。【操作方法】 1. PDB的打开与关闭关闭和开启DB的时候要看DB的警告日志，日志位置（在Oracle用户下查看&…...

编程日记 2025/5/30 6:46:11

十一、动态构建UI元素

装饰器Builder 装饰器BuilderParam <font style"color:rgba(0, 0, 0, 0.9);">BuilderParam</font> 该装饰器用于声明任意UI描述的一个元素，类似slot占位符。链接简而言之：就是自定义组件允许外部传递 UI // SonCom 的实现略…...

编程日记 2025/6/24 14:32:42

智能时代的基石：神经网络

智能时代的基石：神经网络第一节：神经网络简介课程目标本节课程旨在全面介绍神经网络的基本概念、结构以及其在历史发展中的重要里程碑。通过深入理解神经网络的工作原理和演变过程，学员将能够掌握神经网络在现实世界中的多种应用&#…...

编程日记 2025/6/23 8:54:55

VScode配置GIT

在Visual Studio Code（VSCode）中检测不到已安装的Git可以通过以下步骤来解决‌： ‌确认Git是否正确安装‌：首先，确保在计算机上正确安装了Git。可以通过打开命令行窗口并输入git --version来检查是否能够显示Git的版本…...

编程日记 2025/6/19 23:10:36

【CSS】css 如何实现固定宽高比

今天和同事讨论这个问题，一时间还想不到了，于是学习了下，就顺便当个记录吧要在CSS中实现固定宽高比，有两种主要的方法可以选择。一种是使用新的aspect-ratio属性，另一种是利用padding技巧。随着现代浏览器对aspect-ra…...

编程日记 2025/6/20 20:41:04

使用webrtc-streamer查看实时监控

摄像头配置（海康摄像头为例） 摄像头视频编码应改成H264格式 webrtc-streamer下载 webrtc-streamer下载地址下载后解压出来双击运行，端口默认8000 VUE2项目引入文件在项目静态文件“public”中需引入两个js文件“webrtcstreamer.js”与“…...

编程日记 2025/6/24 15:21:37

ansible部署nginx：1个简单的playbook脚本

文章目录 hosts--ventoryroles执行命令使用ansible向3台centos7服务器上安装nginx hosts–ventory [rootstand playhook1]# cat /root/HOSTS # /root/HOSTS [webservers] 192.168.196.111 ansible_ssh_passpassword 192.168.196.112 ansible_ssh_passpassword 192.168.196.1…...

编程日记 2025/6/24 16:27:21

Ubuntu安装Gitlab详细图文教程

1、环境准备 1.1、Ubuntu环境 Ubuntu24.04Sever版安装教程 1.2、更新系统 sudo apt update -y sudo apt-get update sudo apt-get upgrade 2、安装Nginx 2.1 安装nginx # 安装 apt install nginx -y 2.2 修改nginx配置⽂件 # 修改nginx配置 vim /etc/nginx/si…...

编程日记 2025/6/24 15:40:12

前端面试准备问题2

1.防抖和节流分别是什么，应用场景防抖：在事件被触发后，只有在指定的延迟时间内没有再次触发，才执行事件处理函数。在我的理解中，简单的说就是在一个指定的时间内，仅触发一次，如果有多次重复触…...

编程日记 2025/6/23 14:22:33

uni-app之web-view组件 postMessage 通信【跨端开发系列】

🔗 uniapp 跨端开发系列文章：🎀🎀🎀 uni-app 组成和跨端原理【跨端开发系列】 uni-app 各端差异注意事项【跨端开发系列】uni-app 离线本地存储方案【跨端开发系列】uni-app UI库、框架、组件选型指南【跨端开…...

编程日记 2025/6/24 10:55:07

IntelliJ IDEA 使用技巧与插件推荐

目录常用使用技巧 1. 使用快捷键提升开发效率 2. 多光标编辑 3. 代码自动补全 4. 使用 Find Action 快速执行操作 5. 集成版本控制系统（VCS） 6. 快速查看代码文档推荐插件 1. Lombok Plugin 2. Rainbow Brackets 3. Key Promoter X 4. Chec…...

编程日记 2025/6/24 15:46:25

zookeeper基础命令详解

zookeeper基础命令详解目录文章目录 zookeeper基础命令详解目录一、列出所有基础命令一、列出所有基础命令先启动一个zookeeper客户端连接zookeeper，如果还没有启动zookeeper集群的参考本文启动之后再做后续操作。 https://blog.csdn.net/weixin_42924400/artic…...

编程日记 2025/6/19 23:12:39

2025周易算命网站搭建详细方法+源码选择php环境的配置

以下是一个详细的搭建教程，包括网站分类、环境配置、程序设计和功能实现。 1. 环境准备 1.1 服务器选择操作系统: Linux（推荐使用Ubuntu或CentOS）Web服务器: Nginx数据库: MySQLPHP版本: 7.4.x（确保小于8.0） 1.2 安…...

编程日记 2025/6/21 1:41:03

16：00面试，16：06就出来了，问的问题有点变态。。。

从小厂出来，没想到在另一家公司又寄了。到这家公司开始上班，加班是每天必不可少的，看在钱给的比较多的份上，就不太计较了。没想到5月一纸通知，所有人不准加班，加班费不仅没有了，薪资还要降40%…...

编程日记 2025/6/24 16:11:44

《杨辉三角》

题目描述给出 n(1≤n≤20)n(1≤n≤20)，输出杨辉三角的前 nn 行。如果你不知道什么是杨辉三角，可以观察样例找找规律。输入格式无输出格式无输入输出样例输入 #1复制 6 输出 #1复制 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 C语言…...

编程日记 2025/5/31 0:37:45

2024年03月中国电子学会青少年软件编程（Python）等级考试试卷（五级）答案 + 解析

青少年软件编程（Python）等级考试试卷（五级）分数：100 题数：38 一、单选题(共25题，共50分) 1. 以下代码的输出结果是？（） nums = list(range(100, 201)) print...

编程日记 2025/5/27 0:33:12

【游戏设计原理】7 - 加德纳的多元智能理论

虽然多元智能理论是对认知方式的分类，但它也可以为游戏设计提供丰富的思路和策略，帮助设计师创建更具吸引力、包容性和多样性的游戏。通过理解不同玩家的认知方式和优势，我们可以更精准地设计游戏的元素和玩法，使其能够吸引广泛的…...

编程日记 2025/6/22 1:40:17

Jackson @JsonProperty 注解

1. 概述 Jackson 是一个流行的Java库，用于将Java对象转换为JSON格式以及从JSON反序列化回Java对象。一种常见的需求是在序列化为JSON或从JSON反序列化时自定义字段的命名。Jackson 的 JsonProperty 注解正好满足了这一需求。 JsonProperty 注解概览 JsonProperty…...

编程日记 2025/6/1 10:22:31

【数据结构——栈与队列】链栈的基本运算（头歌实践教学平台习题）【合集】

目录😋 任务描述相关知识测试说明我的通关代码: 测试结果： 任务描述本关任务：编写一个程序实现链栈的基本运算。相关知识为了完成本关任务，你需要掌握： 初始化栈、销毁栈、判断栈是否为空、进栈、出栈、取栈…...

编程日记 2025/6/4 4:01:22

数据库乐观锁和悲观锁、redis分布式锁使用场景

前言最近发现我们同事，但凡需要加锁的地方都用的是分布式锁。而且我们的后台系统，并没有什么并发量，而且还是单体应用。我真的有点怀疑我的同事不太清楚数据乐观锁、悲观锁和redis分布式的使用场景。请今天就说一下各种锁的应用场景吧。 …...

编程日记 2025/6/23 8:27:58

React的状态管理库-Redux

核心思想：单一数据源、状态是只读的、以及使用纯函数更新状态。组成部分 Store（存储） 应用的唯一状态容器，存储整个应用的状态树,使用 createStore() 创建。 getState()：获取当前状态。dispatch(action)&#xff…...

编程日记 2025/6/24 8:22:55

《自制编译器》--青木峰郎 -读书笔记编译hello

在该书刚开始编译hello.cb时就遇到了问题。本人用的是wsl，环境如下， 由于是64位，因此根据书中的提示，从git上下载了64位的cb编译器 cbc-64bit 问题一: 通过如下命令编译时,总是报错。 cbc -Wa,"--32" -Wl,"-…...

编程日记 2025/6/24 16:10:42

XSS（跨站攻击）

XSS漏洞（跨站脚本） 1.XSS 漏洞简介 XSS又叫CSS（Cross Site Script）跨站脚本攻击是指恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从…...

编程日记 2025/6/21 1:41:01

华为自反ACL实验

一、实验背景做这个实验的原因是最近公司里上了三台小程序服务器，由于三台服务器的端口都映射出去了，领导要求A网段的三台服务器不能访问内网B，C网段，同时B、C网段内网用户可以访问A段的94、95、96服务器； 也就是PC4\…...

编程日记 2025/6/24 15:20:13

MyBatisPlus实现多表查询

在MyBatisPlus中实现多表查询，主要有以下几种方法： 使用注解进行多表查询： 你可以在Mapper接口中使用Select注解来编写SQL查询语句，实现多表查询。例如，如果你想根据用户ID查询用户信息和对应的区域名称，可…...

编程日记 2025/6/19 20:20:16

【人工智能-中级】循环神经网络（RNN）与Transformer在自然语言处理中的进阶应用

循环神经网络（RNN）与Transformer在自然语言处理中的进阶应用自然语言处理（NLP）是人工智能领域中的重要分支，其主要任务是使计算机能够理解、生成和处理人类语言。近年来，循环神经网络（RNN）和Transformer模型已成为NLP领域的两大核心技术。本文将探讨这两类模型在自然…...

编程日记 2025/6/24 5:45:39

ZED相机应用

下载SDK wget https://stereolabs.sfo2.cdn.digitaloceanspaces.com/zedsdk/3.6/ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run 安装 ./ZED_SDK_Ubuntu18_cuda11.5_v3.6.5.run skip_python 测试 cd /usr/local/zed/tools ls ZED_Calibration ZED_Depth_Viewer ZED_Diagnostic ZED_E…...

编程日记 2025/6/24 15:56:01

JavaScript 中的 Map方法

1. 创建 Map

2、常用方法

2.1 添加键值对set(key, value)

2.2 取指定键的值get(key)

2.3 检查 Map 中是否存在指定的键has(key)

2.4 删除指定的键值对delete（key）

2.5 清空Map clear()

2.6 返回 Map 中键值对的数量size

3、迭代方法

3.1forEach(callback)

3.2 返回 Map 中所有键的迭代器（Iterator）keys()

3.3 返回 Map 中所有值的迭代器（Iteratorvalues()

3.4 返回 Map 中所有键值对的迭代器entries()

应用小栗子

相关文章：