ES6 Map与Set对象详解：特性、操作与常见应用场景

作者：异步漫步时间：2026-10-25 09:50:15浏览：603

本文深入解析ES6新增的Map和Set数据结构。Map用于存储有序的键值对，支持任意类型的键与值，涵盖迭代、克隆及合并操作。Set用于存储唯一值，详细阐述了+0、-0、NaN等特殊值的去重逻辑。此外，文章演示了Map与数组的相互转换、Set在数组去重、并集与交集计算中的实际应用，为前端开发提供高效的数据处理方案。

一、Map对象

Map 是一种键值对集合，其键和值可以是任意类型的值，包括对象或原始类型数据。

Map 内部维护着键值对的插入顺序，这意味着迭代时能保持添加时的先后次序。

let myMap = new Map();
myMap.set("23","乔丹");
myMap.set("33","皮蓬");
let name = myMap.get("33");
console.log(name);  //皮蓬
let has = myMap.has("24"); //查找是否含有此键
console.log(has); //false

Map 支持多种迭代方式，包括遍历键、值以及键值对。

let myMap = new Map();
myMap.set("23","乔丹");
myMap.set("33","皮蓬");
myMap.set("99","罗德曼");
//循环键
for (let key of myMap.keys()) {
  console.log(key);
}		
//循环值
for (let value of myMap.values()) {
  console.log(value);
}			
//循环键和值
for (let [key, value] of myMap) {
  console.log(key + " = " + value);
}
//或
for (let [key, value] of myMap.entries()) {
  console.log(key + " = " + value);
}
			
//使用forEach循环
myMap.forEach(function(value,key){
	console.log(key + "=" + value);
},myMap);

Map 与 Array 之间可以相互转换，例如将二维数组初始化为 Map，或将 Map 转换为数组。

//二维数组转换成map对象
let arr = [[23,"乔丹"],[33,"皮蓬"],[99,"罗德曼"]];
let myMap = new Map(arr);
for (let [key, value] of myMap) {
  console.log(key + " = " + value);
}
//map对象转换成二维数组
let outArr = Array.from(myMap);
console.log(outArr);

通过构造函数直接传入现有 Map 实例，可以实现 Map 对象的浅克隆。

let myMap1 = new Map([[23,"乔丹"],[33,"皮蓬"],[99,"罗德曼"]]);
let myMap2 = new Map(myMap1);
for (let [key, value] of myMap2) {
   console.log(key + " = " + value);
}

合并两个 Map 时，若存在相同键，后添加的键值对将覆盖先前的值。

let myMap1 = new Map([[23,"乔丹"],[33,"皮蓬"],[99,"罗德曼"]]);
let myMap2 = new Map([[23,"詹姆斯"],[24,"科比"],[11,"姚明"]]);
let myMap = new Map([...myMap1,...myMap2]); //合并之后詹姆斯会替换乔丹
for (let [key, value] of myMap) {
	console.log(key + " = " + value);
}

二、Set对象

Set 用于存储唯一值，无论是原始类型还是对象引用，存入的值在集合中必须保持唯一性。

由于 Set 要求值唯一，判断两个值是否相等遵循特定规则，以下特殊值需特别注意：

（1）+0 和 -0 在 Set 中被视为恒等，因此不会重复存储；

（2）undefined 与 undefined 恒等，故不会重复；

（3）NaN 与 NaN 不恒等，但 Set 中仅允许存在一个 NaN，视为不重复。

let mySet = new Set();
mySet.add(1);
mySet.add("hello");  //这里体现了类型的多样性
mySet.add(2);
mySet.add(1); //这里添加不了,这里体现了值的唯一性
console.log(mySet); //{1,"hello",2}
console.log(mySet.has(3)); //false, 是否含有3

以下代码展示了即使对象内容相同，只要引用地址不同，Set 会将其视为不同元素进行存储。

let mySet = new Set();
let o = {a: 1, b: 2}; 
mySet.add(o);
mySet.add({a: 1, b: 2});
console.log(mySet);

Set 类型支持与 Array 和 String 之间的转换操作。

//Array 转 Set
let arr = ["乔丹","皮蓬","罗德曼"];
let mySet = new Set(arr);
console.log(mySet);

//Set转Array(使用...)
let mySet = new Set();
mySet.add("乔丹");
mySet.add("皮蓬");
mySet.add("罗德曼");
let arr = [...mySet];
console.log(arr);

//字符串转Set(注:Set中toString方法是不能将Set转换成String)
let mySet = new Set("hello");
console.log(mySet);  //h e l o (两个l只出现一次)

Set 的主要应用场景包括数组去重、计算数组的并集与交集等。

//数组去重复
let mySet = new Set([1,2,1,2,3,3,4,5,6,4,7]);
let arr = [...mySet];
console.log(arr); //1,2,3,4,5,6,7

//数组求并集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let union = new Set([...a, ...b]);
let arr = [...union];
console.log(arr); //1, 2, 3, 4

//数组求交集
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
let intersect = new Set([...a].filter(p=>b.has(p)));
let arr = [...intersect];
console.log(arr); //2, 3

以上就是对 ES6 中 Map 和 Set 基础语法的详细介绍，希望能为学习 JavaScript 数据结构带来帮助。

作者最新文章

D3.js 比例尺与坐标轴的配置详解

2026-11-05 16:54:46

JavaScript怎么遍历对象的Symbol键和不可枚举属性

2026-11-05 13:13:39

封装一个健壮的JS字符串判空工具函数

2026-11-05 12:16:14

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

2026-11-05 11:22:29

JavaScript立即执行函数(IIFE)是什么及基本语法

2026-11-05 10:51:19