JavaScript的Map数据结构是什么?如何使用?

来源:程序开发作者:台湾程序员头衔:程序员
导读:本期聚焦于小伙伴创作的《JavaScript的Map数据结构是什么?如何使用?》,敬请观看详情,探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《JavaScript的Map数据结构是什么?如何使用?》有用,将其分享出去将是对创作者最好的鼓励。

Map是JavaScript内置的一种键值对集合数据结构,它允许使用任意类型的值作为键,包括对象、函数、基本类型等,解决了普通对象只能用字符串或Symbol作为键的限制。Map会按照插入顺序维护键值对的顺序,还提供了丰富的方法方便进行增删改查操作,在很多场景下比普通对象更适合用来存储映射关系。

JavaScript的Map数据结构是什么?如何使用?

Map的基本特性

和普通对象相比,Map有以下几个核心特性:

  • 键的类型不受限制,任意值都可以作为键,包括对象、数组、函数等
  • 键值对的顺序是按照插入顺序保存的,遍历的时候会按照插入顺序返回结果
  • 可以通过size属性直接获取键值对的数量,不需要手动计算
  • 在频繁增删键值对的场景下,Map的性能通常优于普通对象

创建Map实例

可以通过Map构造函数创建Map实例,构造函数支持传入一个可迭代对象作为初始数据,这个可迭代对象的每个元素需要是一个包含两个元素的数组,第一个元素是键,第二个元素是值。

// 创建空Map
const emptyMap = new Map();

// 创建带初始数据的Map
const initMap = new Map([
  ['name', '张三'],
  [18, '年龄'],
  [{ id: 1 }, '用户对象']
]);

console.log(initMap.size); // 输出:3

Map的常用操作方法

添加和修改键值对

使用set方法可以向Map中添加新的键值对,如果键已经存在,则会更新对应的值。set方法返回Map实例本身,因此支持链式调用。

const userMap = new Map();

// 添加键值对
userMap.set('name', '李四');
userMap.set(1001, '用户ID');

// 链式调用添加
userMap.set('age', 20).set('city', '北京');

// 更新已有键的值
userMap.set('age', 21);
console.log(userMap.get('age')); // 输出:21

获取和判断键值

使用get方法可以根据键获取对应的值,如果键不存在则返回undefined。使用has方法可以判断Map中是否存在指定的键,返回布尔值。

const map = new Map([['a', 1], ['b', 2]]);

console.log(map.get('a')); // 输出:1
console.log(map.get('c')); // 输出:undefined
console.log(map.has('b')); // 输出:true
console.log(map.has('d')); // 输出:false

删除和清空键值对

使用delete方法可以删除指定键的键值对,删除成功返回true,否则返回false。使用clear方法可以清空Map中的所有键值对。

const map = new Map([['x', 10], ['y', 20], ['z', 30]]);

console.log(map.delete('x')); // 输出:true
console.log(map.delete('m')); // 输出:false
console.log(map.size); // 输出:2

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

遍历Map

Map提供了多种遍历方法,包括keys、values、entries和forEach,也可以直接使用for...of循环遍历。

const map = new Map([
  ['name', '王五'],
  ['age', 25],
  ['job', '开发']
]);

// 遍历键
for (const key of map.keys()) {
  console.log(key); // 依次输出:name、age、job
}

// 遍历值
for (const value of map.values()) {
  console.log(value); // 依次输出:王五、25、开发
}

// 遍历键值对
for (const [key, value] of map.entries()) {
  console.log(`${key}: ${value}`);
}

// 使用forEach遍历
map.forEach((value, key) => {
  console.log(`${key} -> ${value}`);
});

Map和普通对象的区别

虽然Map和普通对象都可以存储键值对,但两者有明显差异,具体对比如下:

对比项Map普通对象
键的类型任意类型仅字符串、Symbol
键的顺序按插入顺序保存普通键无序,数字键有特殊排序规则
大小获取size属性直接获取需要手动计算Object.keys(obj).length
默认键没有默认键有原型链上的默认键
性能频繁增删时更优频繁增删时性能较差

使用场景建议

如果满足以下场景,建议优先使用Map:

  • 需要使用非字符串类型作为键的时候
  • 需要频繁进行增删键值对操作的时候
  • 需要按照插入顺序遍历键值对的时候
  • 需要直接获取键值对数量的时候

如果只是存储简单的字符串键映射,且不需要频繁增删,普通对象的语法更简洁,更适合使用。

JavaScriptMap数据结构键值对修改时间:2026-06-13 18:51:27

免责声明:​ 已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰,观点力求客观中立。本站旨在免费分享,内容仅供个人学习、研究或参考使用。若引用了第三方作品,版权归原作者所有。如内容涉及您的权益,请联系我们处理。
内容垂直聚焦
专注技术核心技术栏目,确保每篇文章深度聚焦于实用技能。从代码技巧到架构设计,为用户提供无干扰的纯技术知识沉淀,精准满足专业提升需求。
知识结构清晰
覆盖从开发到部署的全链路。AI、前端、编程、数据库、服务器、建站、系统层层递进,构建清晰学习路径,帮助用户系统化掌握开发与运维所需的核心技术。
深度技术解析
拒绝泛泛而谈,深入技术细节与实践难点。无论是数据库优化还是服务器配置,均结合真实场景与代码示例进行剖析,致力于提供可直接应用于工作的解决方案。
专业领域覆盖
精准对应开发生命周期。从前端界面到后端编程,从数据库操作到服务器运维,形成完整闭环,一站式满足全栈工程师和运维人员的技术需求。
即学即用高效
内容强调实操性,步骤清晰、代码完整。用户可根据教程直接复现和应用于自身项目,显著缩短从学习到实践的距离,快速解决开发中的具体问题。
持续更新保障
专注既定技术方向进行长期、稳定的内容输出。确保各栏目技术文章持续更新迭代,紧跟主流技术发展趋势,为用户提供经久不衰的学习价值。