JavaScript ES6 Map与Set数据结构详解
本文介绍JavaScript ES6新增的Map和Set数据结构。Map用于存储键值对，支持任意类型的键，查找速度快；Set用于存储唯一值，自动过滤重复元素。文章详细讲解了两种数据类型的初始化、常用方法如get、set、has、delete及add的使用场景与注意事项。
Map数据结构简介
JavaScript中默认的对象表示方式{}可以看作其他语言中的Map或Dictionary，即一组键值对。但JavaScript对象存在一个小问题：键必须是字符串。实际上，使用Number或其他数据类型作为键也是合理的。为解决此问题，最新的ES6规范引入了新的数据类型Map。要测试浏览器是否支持ES6，可执行，若浏览器报ReferenceError错误，则需更换支持ES6的浏览器。
'use strict';
var m = new Map();
var s = new Set();
alert('你的浏览器支持Map和Set！');
Map
Map是一种键值对结构，具有极快的查找速度。
举例说明，若需根据同学姓名查找对应成绩，使用Array实现需要两个Array：
var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];给定一个名字查找对应成绩时，需先在names中找到对应位置，再从scores取出成绩。Array越长，耗时越长。
若使用Map实现，只需一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论表多大，查找速度都不会变慢。用JavaScript编写Map如下：
var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95
初始化Map需传入二维数组，或直接初始化空Map。Map具有以下方法：
var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined
由于一个key只能对应一个value，多次对同一key放入value时，后面的值会覆盖前面的值：
var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88
Set数据结构简介
Set
Set与Map类似，也是一组key的集合，但不存储value。由于key不能重复，Set中不存在重复key。创建Set时，需提供Array作为输入，或直接创建空Set：
var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3
重复元素在Set中会被自动过滤：
var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}
注意数字3和字符串'3'是不同的元素。
通过add(key)方法可向Set中添加元素，即使重复添加也不会有效果：
>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}
通过delete(key)方法可删除元素：
var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}
小结
Map和Set是ES6标准新增的数据类型，请根据浏览器支持情况决定是否使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
JS合并多个数组的三种方法：concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型：typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36