本文详细介绍JavaScript ES6新增的Set和Map数据结构。Set用于存储唯一值，支持添加、删除和遍历；Map用于键值对存储，键可为任意类型。文章通过源码示例演示了Set的数组去重、交集并集差集运算，以及Map的增删改查和遍历操作，并对比了Map与Object的区别，帮助开发者根据场景选择合适的存储结构。
理解Set与Map的基本概念
ES6引入了Set和Map两种新的数据存储结构，在此之前，JavaScript主要依赖Array和Object进行数据存储。针对不同的业务场景，选择合适的集合类型能更高效地管理数据。
Set集合详解
Set对象允许存储任何类型的唯一值，包括原始值和对象引用。其核心特性是确保集合内元素的唯一性。
Set集合的语法结构如下：
//创建一个set集合，传参为一个可迭代的对象
const s1 = new Set(iterable);
Set提供的API包括：
| 名称 | 类型 | 简介 |
|---|---|---|
| Set.add() | 原型方法 | 添加数据 |
| Set.has() | 原型方法 | 判断是否存在一个数据 |
| Set.delete() | 原型方法 | 删除数据 |
| Set.clear() | 原型方法 | 清空集合 |
| Set.size属性 | 属性 | 集合长度 |
| for of | 原型方法 | 遍历 |
以下是Set集合的源码示例：
// 1.add() 往创建好的集合中添加数据的
const s1 = new Set();
s1.add(1)
s1.add(2)
s1.add(3)
s1.add(4)
s1.add(1) //无效添加，因为数据重复
console.log(s1)
// 2.has() 判断数据是否存在
console.log(s1.has(1))
console.log(s1.has(10))
// 3.delete() 返回是否删除成功
s1.delete(1)
console.log(s1)
console.log(s1.delete(10))
// 4.clear() 清空集合
s1.clear()
console.log(s1)
// 5.size属性 只能读，不能改
console.log(s1.size)
// 6.遍历:for of,因为是一个可迭代的对象
for(const item of s1){
console.log(item)
}
// 重写的实例方法 forEach
s1.forEach((item, index, s) => {
// index 不是下标，set集合没有下标
// forEach中的第一个参数的值和第二个参数的值是相同的，都表示set中的每一项数据
console.log(item, index, s)
})
Set的典型使用场景包括：
//数组去重
const arr = [1,1,22,22,3,1,88,88,65,123,444,65];
const s = new Set(arr);
console.log([...s]);
//或者一句话搞定
const result = [...new Set(arr)];
console.log(result);//[1,22,3,88,65,123,444,65]
// 两个数组的交集，并集，差集，结果得到一个新的数组
const arr1 = [12,34,55,33,11,33,5,12];
const arr2 = [55,34,11,78,10,19,88,88,99,99];
// 用set完成
// 交集:你有我也有的数组元素 组成一个新数组
const cross = [...new Set(arr1)].filter(item => arr2.indexOf(item) >= 0);
console.log(cross);//[]
// 并集：数组合并去重之后的新数组
const result = [...new Set([...arr1,...arr2])];
console.log(result);
// 差集：你有我没有，我有你没有的数组元素 组成一个新数组
let arr4 = result.filter(item=>{
// 判断arr1里面存在并且arr2不存在的数据 和 arr1里面不存在并且arr2里存在的数据
return arr1.includes(item) && !arr2.includes(item) || !arr1.includes(item) && arr2.includes(item)
})
console.log(arr4) //[12, 33, 5, 78, 10, 19, 88, 99]
Map集合（映射）
Map对象用于保存键值对。其中，任何类型的值（无论是对象还是原始值）都可以作为键或值使用，提供了比Object更灵活的键类型支持。
Map集合的语法结构如下：
let swk=new Map()
console.log(swk);//Map(0)
Map提供的API包括：
| 名称 | 类型 | 简介 |
|---|---|---|
| Map.set(key,value) | 原型方法 | 添加数据 |
| Map.get(key) | 原型方法 | 获取数据 |
| Map.has(key) | 原型方法 | 判断是否存在一个数据 |
| Map.delete(key) | 原型方法 | 删除数据 |
| Map.clear() | 原型方法 | 清空集合 |
| Map.size属性 | 原型方法 | 集合长度 |
| for of | 原型方法 | 遍历 |
以下是Map集合的源码示例：
let swk=new Map();
console.log(swk);
// 1. 新增map元素
// Map.set(key,value) 设置Map对象的键值对（键名，键值） 返回当前对象
swk.set('uname', '孙悟空');
swk.set('age', 600);
swk.set('master', '唐僧');
swk.set('weapon', '金箍棒');
console.log(swk); //Map(4) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧', 'weapon' => '金箍棒'}
swk.set('age', 601);
console.log(swk);
// 键不存在，则添加一项
// 键存在，则修改
// 2. 获取map元素
// Map.get(key)返回key值对应的value 如果key不存在则返回undefined
console.log(swk.get('uname')); //孙悟空
console.log(swk.get({})); //undefined
// 3. 判断元素是否存在 has 返回布尔值
console.log(swk.has('uname')); //true
console.log(swk.has({})); //false
// 4. 删除映射元素
swk.delete('weapon');
console.log(swk); //Map(3) {'uname' => '孙悟空', 'age' => 600, 'master' => '唐僧'}
//5. 清空映射元素
// swk.clear();
// console.log(swk); //Map(0) {size: 0}
// 6. 映射元素长度
console.log(swk.size); //3
// 7. 可以使用for of 循环
for (let [key, value] of swk) {
console.log(key, value);
for (let item in value) {
console.log(value[item])
}
}
console.log('=====forEach=====');
// 8. 可以使用forEach 遍历
swk.forEach((item, index, map) => {
console.log(index); //uname age master
console.log('==========');
console.log(item); // 孙悟空 60 唐僧
console.log('==========');
console.log(map);
console.log('==========');
})
Maps与Objects的主要区别
- Object的键只能是字符串或Symbol类型，而Map的键可以是任意值（包括字符串、对象、函数甚至NaN）。
- Map中的键值对保持插入顺序，而Object中的键顺序并不保证（尽管现代引擎有优化，但标准未强制）。
- 可以通过Map的size属性直接获取键值对的数量，而Object需要手动计算键的数量。
- Object继承自原型链，其原型上的属性可能与用户自定义的属性名冲突；Map没有原型链问题，不会发生此类冲突。
本文主要讲解了JavaScript ES6中Set集合和Map集合的使用方法、详细解析及源码实例。如需了解更多JavaScript ES6的新特性，请查看相关链接。