目录
一、Set(集合)
1.1 Set 的基本特性
1.2 创建 Set
1.3 Set 的常用方法
(1)set.add(value)
(2)set.has(value)
(3)set.delete(value)
(4)set.clear()
(5)set.size
1.4 Set 的遍历方法
(1)for...of 循环
(2)set.forEach()
(3)set.values()
(4)set.keys()
(5)set.entries()
1.5 Set 的应用场景
(1)数组去重
(2)集合运算
(3)存储唯一值
二、Map(映射)
2.1 Map 的基本特性
2.2 创建 Map
2.3 Map 的常用方法
(1)map.set(key, value)
(2)map.get(key)
(3)map.has(key)
(4)map.delete(key)
(5)map.clear()
(6)map.size
2.4 Map 的遍历方法
(1)map.keys()
(2)map.values()
(3)map.entries()
(4)map.forEach()
2.5 Map 的应用场景
(1)存储键值对
(2)复杂键
(3)缓存数据
(4)修改key值或者修改value值
三、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 |
应用场景 | 存储唯一值,去重 | 存储键值对,快速查找 |