JavaScript 中 “new Map()”的使用

new Map() 是 JavaScript 中用于创建 Map 对象 的构造函数。Map 是一种键值对集合,类似于普通对象(Object),但有以下区别:


1. Map 的特点

1.1 键的类型
  • Map:键可以是任意类型(包括对象、函数、基本类型等)。
  • Object:键只能是字符串或 Symbol。
1.2 顺序
  • Map:键值对按照插入顺序排列。
  • Object:键的顺序不一定与插入顺序一致。
1.3 大小
  • Map:可以通过 size 属性直接获取键值对的数量。
  • Object:需要手动计算键的数量。
1.4 性能
  • Map:在频繁增删键值对的场景下,性能优于 Object
  • Object:在静态键值对的场景下,性能优于 Map

2. Map 的基本用法

2.1 创建 Map
const map = new Map();
2.2 添加键值对

使用 set(key, value) 方法添加键值对。

map.set('name', 'Alice');
map.set(1, 'One');
map.set({ key: 'obj' }, 'This is an object');
2.3 获取值

使用 get(key) 方法获取值。

console.log(map.get('name')); // 输出: "Alice"
console.log(map.get(1)); // 输出: "One"
2.4 检查键是否存在

使用 has(key) 方法检查键是否存在。

console.log(map.has('name')); // 输出: true
console.log(map.has('age')); // 输出: false
2.5 删除键值对

使用 delete(key) 方法删除键值对。

map.delete('name');
console.log(map.has('name')); // 输出: false
2.6 获取键值对数量

使用 size 属性获取键值对数量。

console.log(map.size); // 输出: 2
2.7 清空 Map

使用 clear() 方法清空所有键值对。

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

3. 遍历 Map

3.1 遍历键

使用 keys() 方法获取所有键。

for (const key of map.keys()) {console.log(key);
}
3.2 遍历值

使用 values() 方法获取所有值。

for (const value of map.values()) {console.log(value);
}
3.3 遍历键值对

使用 entries() 方法获取所有键值对。

for (const [key, value] of map.entries()) {console.log(`${key}: ${value}`);
}
3.4 使用 forEach 遍历
map.forEach((value, key) => {console.log(`${key}: ${value}`);
});

4. Map 的常见使用场景

4.1 存储复杂键

当键是对象或函数时,Map 是更好的选择。

const objKey = { id: 1 };
const funcKey = () => {};const map = new Map();
map.set(objKey, 'This is an object key');
map.set(funcKey, 'This is a function key');console.log(map.get(objKey)); // 输出: "This is an object key"
console.log(map.get(funcKey)); // 输出: "This is a function key"
4.2 维护插入顺序

当需要维护键值对的插入顺序时,Map 是更好的选择。

const map = new Map();
map.set('a', 1);
map.set('b', 2);
map.set('c', 3);for (const [key, value] of map) {console.log(`${key}: ${value}`);
}
// 输出:
// a: 1
// b: 2
// c: 3
4.3 缓存数据

Map 可以用于缓存数据,键可以是任意类型。

const cache = new Map();function getData(key) {if (cache.has(key)) {return cache.get(key);}const data = fetchDataFromServer(key); // 假设从服务器获取数据cache.set(key, data);return data;
}

5. Map 与 Object 的对比

特性MapObject
键的类型任意类型字符串或 Symbol
键的顺序插入顺序不一定
大小通过 size 属性获取需要手动计算
性能频繁增删时性能更好静态键值对时性能更好
默认键有原型链上的默认键

6. 总结

  • new Map() 用于创建键值对集合,支持任意类型的键,并维护插入顺序。
  • 适用场景
    • 需要复杂键(如对象、函数)。
    • 需要维护插入顺序。
    • 需要频繁增删键值对。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust语言的集成测试

Rust语言的集成测试 引言 随着软件开发的不断发展,测试已成为一个不可或缺的环节。特别是在系统复杂度日益增加的今天,确保代码质量和稳定性变得尤为重要。Rust作为一门强调安全性和性能的编程语言,其测试框架提供了丰富的工具来帮助开发者…

手写简单的Spring基于注解配置的程序

需求说明: 自己写一个简单的 Spring 容器, 通过读取类的注解(Component ControllerService Reponsitory) ,将对象注入到 IOC 容器,自己使用 IOAnnotaion反射集合 技术实现 思路分析: 一、新建一个包component并在包下创建bean类 …

WSL 导入完整系统包教程

作者: DWDROME 配置环境: OS: Ubuntu 20.04.6 LTS on Windows 11 x86_64Kernel: 5.15.167.4-microsoft-standard-WSL2ros-noetic 🧭WSL 导入完整系统包教程 ✅ 一、准备导出文件 假设你已有一个 .tar 的完整系统包(如从 WSL 或 L…

使用selenium来获取数据集

使用selenium来获取数据集 1、下载最新的chrome浏览器与chromedriver.exe 查看chrome的版本,打开谷歌浏览器,点击右上角的三个点,然后点击【帮助】, 点击【关于Google Chrome】 然后去下载同样为134版本号的chromedriver.exe, 网址:https://googlechromelabs.github.…

(二)VMware:VMware虚拟机安装CentOS教程

目录 1、准备CentOS 7镜像1.1、官网镜像下载1.2、清华大学开源镜像下载​1.3、阿里云开源镜像下载 2、使用 VMware安装CentOS 72.1、创建虚拟机2.2、选择自定义安装2.3、硬件兼容性,保持默认2.4、选择下载的ISO镜像2.5、设置虚拟机名称以及存放磁盘位置2.6、按照需求…

【Agent】Dify Docker 安装问题 INTERNAL SERVER ERROR

总结:建议大家选择稳定版本的分支,直接拉取 master 分支,可能出现一下后面更新代码导致缺失一些环境内容。 启动报错 一直停留在 INSTALL 界面 我是通过 Docker 进行安装的,由于项目开发者不严谨导致,遇到一个奇怪的…

MySQL -- 复合查询

数据库的查询是数据库使用中比较重要的环节,前面的基础查询比较简单,不做介绍,可自行查阅。本文主要介绍复合查询,并结合用例进行讲解。 本文的用例依据Soctt模式的经典测试表,可以自行下载,也可以自己创建…

flutter 开发web端的性能优化

参考资料 Flutter for Web 首次首屏优化 ——JS 分片优化_main.dart.js-CSDN博客文章浏览阅读1.4k次。本文介绍了如何通过延迟加载组件和js分片优化Flutter for Web应用的加载速度。在实践中,通过按需加载减少js文件大小,使用并行加载提升加载效率。通过…

编译安装redis,systemtcl配置redis自启动,系统并发调优

编译安装redis,systemtcl配置redis自启动,系统并发调优 1、编译安装redis wget https://download.redis.io/releases/redis-7.4.2.tar.gz tar -zxf redis-7.4.2.tar.gz cd redis-7.4.2/ make make install/usr/local/bin/redis-server -v2、systemtcl配…

firefly经典蓝牙和QProcess、QFileSystemWatcher记录

QProcess 默认不会启动一个 shell 来解析命令,而是直接调用操作系统的系统调用来启动外部程序。也就是通过fork一个子线程或者exec一个子进程来执行命令。 QProcess的参数模式 QProcess 需要明确指定命令的可执行文件路径或参数列表。 如果命令是一个可执行文件的路径…

Java定时任务的三重境界:从单机心跳到分布式协调

《Java定时任务的三重境界:从单机心跳到分布式协调》 本文将以生产级代码标准,揭秘Java定时任务从基础API到分布式调度的6种实现范式,深入剖析ScheduledThreadPoolExecutor与Quartz Scheduler的线程模型差异,并给出各方案的性能压…

QT QML实现音频波形图进度条,可点击定位或拖动进度

前言 本项目实现了使用QT QML创建一个音频波形图进度条的功能。用户可以在界面上看到音频波形图,并且可以点击进度条上的位置进行定位,也可以拖动进度条来调整播放进度。可以让用户更方便地控制音频的播放进度,并且通过音频波形图可以直观地…

高速网络包处理,基础网络协议上内核态直接处理数据包,XDP技术的原理

文章目录 预备知识TCP/IP 网络模型(4层、7层)iptables/netfilterlinux网络为什么慢 DPDKXDPBFPeBPFXDPXDP 程序典型执行流通过网络协议栈的入包XDP 组成 使用 GO 编写 XDP 程序明确流程选择eBPF库编写eBPF代码编写Go代码动态更新黑名单 预备知识 TCP/IP…

[每周一更]-(第137期):Go + Gin 实战:Docker Compose + Apache 反向代理全流程

文章目录 **1. Go 代码示例(main.go)****2. Dockerfile 多段构建**3.构建 Docker 镜像**4. docker-compose.yml 直接拉取镜像****5. 运行容器****6. 测试 API**7、配置域名访问**DNS解析:将域名转换为IP地址****DNS寻址示例** 8.错误记录 访问…

SpringMVC基本使用

SpringMVC是什么? Spring MVC 是 Spring 框架中的一个模块,用于构建基于 MVC(Model-View-Controller)设计模式的 Web 应用程序。它分离了应用程序的业务逻辑、用户界面和用户输入,使开发更加模块化和易于维护。 核心…

Qt之MVC架构MVD

什么是MVC架构: MVC模式(Model–view–controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controll…

Stream 流中 flatMap 方法详解

🎯 1. flatMap() 到底是啥? flatMap() 是 Stream 里的中间操作,它的作用可以分两步理解: 第一步:对流里的每个元素,先**映射(转换)**成一个 Stream。第二步:把多个子流…

(C语言)理解 回调函数 和 qsort函数

一. 回调函数 1. 什么是回调函数? 回调函数(Callback Function)是通过 函数指针 调用的函数。其本质是: 将函数作为参数传递给另一个函数,并在特定条件下被调用,实现 反向控制。 2. 回调函数的使用 回调函…

vscode记录

vs code 下载安装,git 配置,插件安装_vscode安装git插件-CSDN博客 手把手教你在VS Code中使用 Git_vscode如何输入git命令-CSDN博客 VS Code | 如何快速重启VS Code?_vscode 怎么一键全部重启-CSDN博客 1,安装插件与git集成 2&am…

唯品会商品详情页架构设计与实现:高并发场景下的技术实践‌

引言 唯品会作为国内领先的电商平台,其商品详情页需要应对海量用户的高并发访问,同时保证低延迟和高可用性。本文将从架构设计、数据库优化、缓存策略、前端渲染等方面,结合代码示例,深入解析唯品会商品详情页的技术实现。 一、…