JavaScript 中 Set 和 Map 的示例详解
更新时间：2025年07月22日 14:29:00 作者：露西西
文章介绍了Set和Map两种数据结构,Set存储唯一值且无序,支持快速查找和去重,Map以键值对形式存储,键可为任意类型,保持插入顺序,适用于复杂键管理和缓存场景,两者在存储内容、键类型及应用场景上有明显区别,感兴趣的朋友跟随小编一起看看吧
一、Set（集合）
1.1 Set 的基本特性
唯一性：
Set中的每个值只能出现一次，重复的值会被自动忽略。无序性：
Set中的值没有顺序。可迭代：
Set支持for...of循环和forEach方法。值的类型：
Set可以存储任意类型的值（包括基本类型和引用类型）。
1.2 创建 Set
使用 new Set() 创建一个集合。
const set = new Set(); // 创建一个空集合
1.3 Set 的常用方法
以下是 Set 的核心方法：
（1）set.add(value)
向集合中添加一个值。如果值已存在，则不会重复添加。
set.add(1);
set.add(2);
set.add(2); // 重复值会被忽略
console.log(set); // 输出 Set { 1, 2 }（2）set.has(value)
判断集合中是否包含某个值。如果键是对象或者数组，比较的是引用地址，内容一样也不行。
console.log(set.has(1)); // 输出 true console.log(set.has(3)); // 输出 false
（3）set.delete(value)
从集合中删除某个值。如果删除成功，返回 true；否则返回 false。
set.delete(1); // 删除值为 1 的元素
console.log(set); // 输出 Set { 2 }（4）set.clear()
清空集合中的所有值。
set.clear();
console.log(set); // 输出 Set {}（5）set.size
获取集合中值的数量。
console.log(set.size); // 输出集合的大小
1.4 Set 的遍历方法
Set 提供了多种遍历方式：
（1）for...of循环
const set = new Set([1, 2, 3]);
for (const value of set) {
console.log(value); // 依次输出 1, 2, 3
}（2）set.forEach()
set.forEach((value) => {
console.log(value); // 依次输出 1, 2, 3
});（3）set.values()
返回一个包含集合中所有值的迭代器。
const valuesIterator = set.values();
for (const value of valuesIterator) {
console.log(value); // 依次输出 1, 2, 3
}（4）set.keys()
set.keys() 是 set.values() 的别名，行为完全相同。
const keysIterator = set.keys();
for (const key of keysIterator) {
console.log(key); // 依次输出 1, 2, 3
}（5）set.entries()
返回一个包含 [value, value] 对的迭代器（为了与 Map 的 API 保持一致）。
const entriesIterator = set.entries();
for (const [key, value] of entriesIterator) {
console.log(key, value); // 依次输出 1 1, 2 2, 3 3
}1.5 Set 的应用场景
（1）数组去重
const array = [1, 2, 2, 3, 4, 4]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // 输出 [1, 2, 3, 4]
（2）集合运算
并集：
const set1 = new Set([1, 2, 3]); const set2 = new Set([3, 4, 5]); const union = new Set([...set1, ...set2]); console.log(union); // 输出 Set { 1, 2, 3, 4, 5 }交集：
const intersection = new Set([...set1].filter(x => set2.has(x))); console.log(intersection); // 输出 Set { 3 }差集：
const difference = new Set([...set1].filter(x => !set2.has(x))); console.log(difference); // 输出 Set { 1, 2 }
（3）存储唯一值
const uniqueValues = new Set();
uniqueValues.add(1);
uniqueValues.add(2);
uniqueValues.add(1); // 重复值会被忽略
console.log(uniqueValues); // 输出 Set { 1, 2 }二、Map（映射）
2.1 Map 的基本特性
键值对存储：
Map存储的是键值对（key-value pairs）。键的类型：
Map的键可以是任意类型（包括对象、函数等），而对象的键只能是字符串或 Symbol。顺序性：
Map会记住键值对的插入顺序。性能：
Map在频繁增删键值对的场景下性能更好。
2.2 创建 Map
使用 new Map() 创建一个映射。
const map = new Map(); // 创建一个空映射
2.3 Map 的常用方法
以下是 Map 的核心方法：
（1）map.set(key, value)
向 Map 中添加或更新键值对。
map.set('name', 'Alice');
map.set(1, 'Number One');
map.set({ id: 1 }, 'Object Key');（2）map.get(key)
根据键获取对应的值。如果键不存在，返回 undefined。
console.log(map.get('name')); // 输出 "Alice"
console.log(map.get('age')); // 输出 undefined（3）map.has(key)
判断 Map 中是否存在指定的键。如果键是对象或者数组，比较的是引用地址，内容一样也不行。
console.log(map.has('name')); // 输出 true
console.log(map.has('age')); // 输出 false（4）map.delete(key)
删除指定键的键值对。如果删除成功，返回 true；否则返回 false。
map.delete('name'); // 删除键为 'name' 的键值对（5）map.clear()
清空 Map 中的所有键值对。
map.clear();
（6）map.size
获取 Map 中键值对的数量。
console.log(map.size); // 输出当前键值对的数量
2.4 Map 的遍历方法
Map 提供了多种遍历方式：
（1）map.keys()
返回一个包含所有键的迭代器。
（2）map.values()
返回一个包含所有值的迭代器。
（3）map.entries()
返回一个包含所有键值对的迭代器（默认迭代器）。
（4）map.forEach()
遍历 Map 中的每个键值对。
for (const key of map.keys()) {
console.log(key);
}
for (const value of map.values()) {
console.log(value);
}
for (const [key, value] of map.entries()) {
console.log(key, value);
}
map.forEach((value, key) => {
console.log(key, value);
});2.5 Map 的应用场景
（1）存储键值对
const userMap = new Map();
userMap.set(1, { name: 'Alice' });
userMap.set(2, { name: 'Bob' });
console.log(userMap.get(1)); // 输出 { name: 'Alice' }（2）复杂键
const objKey = { id: 1 };
const map = new Map();
map.set(objKey, 'Value for object key');
console.log(map.get(objKey)); // 输出 "Value for object key"（3）缓存数据
const cache = new Map();
function fetchData(key) {
if (cache.has(key)) {
return cache.get(key);
}
const data = `Data for ${key}`;
cache.set(key, data);
return data;
}
console.log(fetchData('user1')); // 输出 "Data for user1"
console.log(fetchData('user1')); // 从缓存中读取（4）修改key值或者修改value值
1，修改key值：
如果需要修改键，可以按照以下步骤操作：
删除旧的键值对：使用
map.delete(key)。添加新的键值对：使用
map.set(newKey, value)。2，修改value值：
使用
map.set(key, newValue)更新键值对。
三、Set 和 Map 的区别
| 特性 | Set | Map |
|---|---|---|
| 存储内容 | 唯一值（values） | 键值对（key-value pairs） |
| 键的类型 | 无键，只有值 | 任意类型（包括对象、函数等） |
| 值的唯一性 | 值唯一 | 键唯一，值可以重复 |
| 顺序性 | 记住插入顺序 | 记住插入顺序 |
| 常用方法 | add、has、delete | set、get、has、delete |
| 应用场景 | 存储唯一值，去重 | 存储键值对，快速查找 |
到此这篇关于JavaScript 中 Set 和 Map 的示例详解的文章就介绍到这了,更多相关js set和map内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了BootStrap表单宽度设置方法,仅仅是小编日常遇到问题记录，写的不好还请见谅，需要的朋友可以参考下2017-03-03
js ondragstart事件在用户开始拖动元素或选择的文本时触发
ondragstart 事件在用户开始拖动元素或选择的文本时触发,拖放是 HTML5 中非常常见的功能,下面就为大家分享一下2025-08-08
数组是几乎所有编程语言的基础语法，本文将不会介绍数组的基础语法和用法，而是从JavaScript中数组的一些特殊之处入手，通过这些少有特性的详细介绍，加深我们对数组的理解2023-02-02
今天小编就为大家分享一篇关于JavaScript的词法结构精华篇，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-10-10
CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭，如一次性处理多个产品，或对文章的删除、产品的下架等处理，一条一条的点显然有一些麻烦，如果能每一行放一个checkbox，然后统一处理就好办的多了，需要的朋友可以参考下2016-02-02
今天小编就为大家分享一篇解决layui页面按钮点击无反应,也不报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了js继承方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
退出循环，使用break；退出当前循环继续下一个循环，使用continue，jquery中使用return false；continue，使用return true2014-09-09
ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称，它是一个成熟的开源框架，基于DDD+Repository模式，自带Zero权限和认证模块，避免了从零开始搭建框架的烦恼。今天来分享下如何在ABP框架的模式里面使用bootstrapTable组件。2017-07-07
这篇文章主要介绍了ES6使用新特性Proxy实现的数据绑定功能,结合具体实例形式分析了ES6使用Proxy实现数据绑定具体原理、操作步骤与相关注意事项,需要的朋友可以参考下2020-05-05
最新评论