【JavaScript】`Map` 数据结构
创始人
2024-11-19 07:07:41
0次

文章目录

    • 一、`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')); // 输出: false  map.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: 25  for (let key of map.keys()) {   console.log(key); } // 输出: // name // age  for (let value of map.values()) {   console.log(value); } // 输出: // Alice // 25  for (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 笔记
  • 数据结构

在这里插入图片描述

相关内容

热门资讯

实测交流透视挂!宝玛大厅ai智... 实测交流透视挂!宝玛大厅ai智能透视挂教程,宝玛大厅破解软件经验(本来有挂辅助)1、每一步都需要思考...
总算了解辅助器!朱雀吴江三缺一... 总算了解辅助器!朱雀吴江三缺一ai智能透视辅助挂技巧,朱雀吴江三缺一好像是有挂(有辅助挂细节)朱雀吴...
今日公布透视!九五至尊大厅ai... 今日公布透视!九五至尊大厅ai智能透视插件,九五至尊大厅有没有透视挂窍门(切实有挂技术)1、在九五至...
玩家必看科普开挂!聚闲麻将ai... 玩家必看科普开挂!聚闲麻将ai智能透视辅助挂软件,聚闲麻将总是真的有挂(有辅助挂方式)聚闲麻将能透视...
据报道开挂!旅游娱乐ai智能开... 据报道开挂!旅游娱乐ai智能开挂工具,旅游娱乐辅助工具演示(一直有挂教学)1、全新机制【旅游娱乐ai...
一分钟揭秘开挂!决胜朋来麻将a... 一分钟揭秘开挂!决胜朋来麻将ai智能透视辅助挂教程,决胜朋来麻将真是真的是有挂(有辅助挂总结)1、首...
如何分辨真伪透视!红牛ai智能... 如何分辨真伪透视!红牛ai智能透视攻略,红牛是不是有挂经验(真是有挂技术)1、操作简单,无需红牛手机...
2分钟细说辅助器!江湖大庆麻将... 2分钟细说辅助器!江湖大庆麻将ai智能透视辅助挂攻略,江湖大庆麻将竟然是真的有挂(有辅助挂头条)1、...
总算清楚透视挂!老夫子厅ai智... 总算清楚透视挂!老夫子厅ai智能透视挂技巧,老夫子厅怎么开挂课程(好像发现有挂)老夫子厅破解侠是真的...
解密关于辅助!菜鸟麻将ai智能... 解密关于辅助!菜鸟麻将ai智能透视辅助挂脚本,菜鸟麻将总是存在有挂(有辅助挂存在)1、用户打开应用后...