当前位置：首页 > article >正文

ES6中，Set和Map的区别

article 2024/12/3 18:13:40

在ES6中，Set 和 Map 是两种新的数据结构，它们都有各自的特点和应用场景。以下是它们的主要区别：

1. 数据结构

Set：是一种集合，用于存储唯一值，可以是任何类型的值（原始值或对象）。
Map：是一种键值对的集合，其中键和值可以是任意类型。

2. 存储内容

Set：存储的是值的集合，没有键。

const set = new Set([1, 2, 3]);
console.log(set); // Set { 1, 2, 3 }

Map：存储的是键值对的集合，键和值都有独立的含义。

const map = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(map); // Map { 'key1' => 'value1', 'key2' => 'value2' }

3. 键的特性

Set：值是唯一的，不允许重复。

const set = new Set();
set.add(1);
set.add(1);
console.log(set); // Set { 1 }

Map：键也是唯一的，但键和值是单独的，可以存储重复的值。

const 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：获取集合的大小。
```
const 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：获取键值对的数量。
```
const map = new Map();
map.set('key', 'value');
console.log(map.get('key')); // 'value'
console.log(map.has('key')); // true
```

5. 遍历方式

Set：可以用forEach或for...of遍历集合的值。

const 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遍历键值对，分别获取键和值。

const 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：
- 需要存储键值对数据，且键可以是任意类型（比如用对象作为键）。

示例对比

// 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