在ES6中,Set
和 Map
是两种新的数据结构,它们都有各自的特点和应用场景。以下是它们的主要区别:
1. 数据结构
- Set :是一种集合 ,用于存储唯一值,可以是任何类型的值(原始值或对象)。
- Map :是一种键值对 的集合,其中键和值可以是任意类型。
2. 存储内容
-
Set :存储的是值的集合 ,没有键。
javascriptconst set = new Set([1, 2, 3]); console.log(set); // Set { 1, 2, 3 }
-
Map :存储的是键值对的集合 ,键和值都有独立的含义。
javascriptconst map = new Map([['key1', 'value1'], ['key2', 'value2']]); console.log(map); // Map { 'key1' => 'value1', 'key2' => 'value2' }
3. 键的特性
-
Set :值是唯一的,不允许重复。
javascriptconst set = new Set(); set.add(1); set.add(1); console.log(set); // Set { 1 }
-
Map :键也是唯一的,但键和值是单独的,可以存储重复的值。
javascriptconst map = new Map(); map.set('key', 'value1'); map.set('key', 'value2'); console.log(map); // Map { 'key' => 'value2' }
4. 属性和方法
-
Set :
- 常用方法:
add(value)
:添加一个值。delete(value)
:删除一个值。has(value)
:检查值是否存在。clear()
:清空集合。size
:获取集合的大小。
javascriptconst set = new Set(); set.add(1); console.log(set.has(1)); // true set.delete(1); console.log(set.size); // 0
- 常用方法:
-
Map :
- 常用方法:
set(key, value)
:设置键值对。get(key)
:获取键对应的值。has(key)
:检查键是否存在。delete(key)
:删除键值对。clear()
:清空所有键值对。size
:获取键值对的数量。
javascriptconst map = new Map(); map.set('key', 'value'); console.log(map.get('key')); // 'value' console.log(map.has('key')); // true
- 常用方法:
5. 遍历方式
-
Set :可以用
forEach
或for...of
遍历集合的值。javascriptconst set = new Set([1, 2, 3]); set.forEach(value => console.log(value)); // 1, 2, 3 for (const value of set) { console.log(value); // 1, 2, 3 }
-
Map :可以用
forEach
或for...of
遍历键值对,分别获取键和值。javascriptconst map = new Map([['key1', 'value1'], ['key2', 'value2']]); map.forEach((value, key) => console.log(key, value)); // 'key1', 'value1' // 'key2', 'value2' for (const [key, value] of map) { console.log(key, value); // 'key1', 'value1' // 'key2', 'value2' }
6. 性能
- Set:对值的操作(如查找、添加、删除)通常比数组更快,尤其是在数据量较大时。
- Map :对键值对的操作性能高,特别是在频繁查找和插入时,
Map
比普通对象更高效。
适用场景
- Set :
- 需要存储唯一值的集合(如移除数组中的重复值)。
- Map :
- 需要存储键值对数据,且键可以是任意类型(比如用对象作为键)。
示例对比
javascript
// Set 示例:移除重复值
const arr = [1, 2, 2, 3];
const unique = new Set(arr);
console.log([...unique]); // [1, 2, 3]
// Map 示例:存储键值对
const userAge = new Map();
userAge.set('Alice', 25);
userAge.set('Bob', 30);
console.log(userAge.get('Alice')); // 25
通过这些区别和应用场景,Set
和 Map
都能大幅提高代码的简洁性和性能。