JavaScript 中 Set 和 Map 的详细讲解

露西西★

已于 2025-03-20 18:39:19 修改

阅读量1.2k

点赞数 16

分类专栏：前端文章标签： javascript 开发语言前端集合

于 2025-03-20 16:28:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_62541773/article/details/146399839

版权

前端专栏收录该内容

7 篇文章

订阅专栏

（1）map.set(key, value)

一、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);
});