当前位置: 首页 > 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 笔记
  • 数据结构

在这里插入图片描述

http://www.lryc.cn/news/406885.html

相关文章:

  • Ubuntu22.04使用NVM安装多版本Node.js和版本切换
  • 基于C51和OLED12864实现Goole小恐龙
  • 【Docker】CentOS7环境下的安装
  • 浏览器的最大并发数(http1.1)
  • Android 开发中px、dpi 和 dp三个单位的介绍
  • zookeeper开启SASL权限认证
  • mysql一个小问题引发的思考-mysql类型转换-查询缓存 及 MYSQL查询缓存以及自动选择不使用查询缓存的情况
  • css更改图片颜色
  • 通过POST请求往Elastic批量插入数据
  • JAW:一款针对客户端JavaScript的图形化安全分析框架
  • 错误解决 error CS0117: ‘Buffer‘ does not contain a definition for ‘BlockCopy‘
  • ICMPv6与DHCPv6之网络工程师软考中级
  • 【HTML — 构建网络】HTML 入门
  • javafx的ListView代入项目的使用
  • 基于ABAP OLE技术实现对服务器文件进行读写操作
  • 求教Postgresql在jdbc处理bit(1)字段的预处理解决方案
  • 微信小程序-自定义tabBar
  • vue3+element-plus 实现动态菜单和动态路由的渲染
  • GO-学习-03-基本数据类型
  • 高并发场景下,系统的保护机制
  • 服务器构建私有npm库(Docker + Verdaccio)
  • LabVIEW做二次开发时应该注意哪些方面?
  • docker配置上网代理获取镜像
  • SqlSugar删除没有定义主键的实体类对应的数据库表数据
  • 虚拟机复制后网络不可用,报错“network.service - LSB: Bring up/down networking”
  • Redis 7.x 系列【30】集群管理命令
  • 将YOLOv8模型从PyTorch的.pt格式转换为TensorRT的.engine格式
  • Hello SLAM(在Linux中实现第一个C++程序)
  • IPD推行成功的核心要素(十五)项目管理提升IPD相关项目交付效率和用户体验
  • C++ 鼠标轨迹API【神诺科技SDK】