十、Set 与 Map 数据结构

ES6 引入了两种新的数据结构：Set 和 Map。它们提供了更灵活的数据存储和操作方式。

Set 是什么？

Set 是一种无重复值的集合，它类似于数组，但成员的值都是唯一的，没有重复值。

基本用法

// 创建 Set
const s = new Set();

// 添加元素
s.add(1);
s.add(2);
s.add(3);
s.add(2); // 重复值，不会被添加

console.log(s); // Set { 1, 2, 3 }
console.log(s.size); // 3

// 检查元素是否存在
console.log(s.has(1)); // true
console.log(s.has(4)); // false

// 删除元素
s.delete(2);
console.log(s); // Set { 1, 3 }

// 清空 Set
s.clear();
console.log(s); // Set {}

Set 常用方法

方法	描述
add(value)	添加一个值，返回 Set 本身
delete(value)	删除一个值，返回布尔值表示是否删除成功
has(value)	检查是否包含某个值，返回布尔值
clear()	清空 Set
size	属性，返回 Set 的成员数量

遍历 Set

const s = new Set(['a', 'b', 'c']);

// 使用 for...of 遍历
for (let item of s) {
  console.log(item);
}
// a
// b
// c

// 使用 forEach 遍历
s.forEach(item => {
  console.log(item);
});
// a
// b
// c

// 转换为数组
const arr = [...s];
console.log(arr); // ['a', 'b', 'c']

const arr2 = Array.from(s);
console.log(arr2); // ['a', 'b', 'c']

数组去重实战

const arr = [1, 2, 2, 3, 3, 3, 4, 5, 5];

// 使用 Set 去重
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

// 字符串去重
const str = 'aabbccddeeff';
const uniqueStr = [...new Set(str)].join('');
console.log(uniqueStr); // abcdef

Map 是什么？

Map 是一种键值对的集合，它的键可以是任何类型（包括对象），而不仅仅是字符串。

基本用法

// 创建 Map
const m = new Map();

// 添加键值对
m.set('name', 'John');
m.set('age', 30);
m.set({ id: 1 }, 'User object');

console.log(m);
// Map {
//   'name' => 'John',
//   'age' => 30,
//   { id: 1 } => 'User object'
// }

console.log(m.size); // 3

// 获取值
console.log(m.get('name')); // John
console.log(m.get({ id: 1 })); // undefined（对象引用不同）

// 检查键是否存在
console.log(m.has('name')); // true
console.log(m.has('gender')); // false

// 删除键值对
m.delete('age');
console.log(m); // Map { 'name' => 'John', { id: 1 } => 'User object' }

// 清空 Map
m.clear();
console.log(m); // Map {}

Map 常用方法

方法	描述
set(key, value)	设置键值对，返回 Map 本身
get(key)	获取键对应的值
delete(key)	删除键值对，返回布尔值表示是否删除成功
has(key)	检查是否包含某个键，返回布尔值
clear()	清空 Map
size	属性，返回 Map 的成员数量

遍历 Map

const m = new Map([
  ['name', 'John'],
  ['age', 30],
  ['city', 'New York']
]);

// 遍历键
for (let key of m.keys()) {
  console.log(key);
}
// name
// age
// city

// 遍历值
for (let value of m.values()) {
  console.log(value);
}
// John
// 30
// New York

// 遍历键值对
for (let [key, value] of m.entries()) {
  console.log(`${key}: ${value}`);
}
// name: John
// age: 30
// city: New York

// 使用 forEach 遍历
m.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// name: John
// age: 30
// city: New York

Set / Map 与 对象 / 数组 的区别

Set vs 数组

特性	Set	数组
元素唯一性	无重复值	允许重复值
查找效率	O(1)	O(n)
遍历顺序	插入顺序	索引顺序
适用场景	存储唯一值	存储有序集合

Map vs 对象

特性	Map	对象
键类型	任意类型	字符串或 Symbol
键顺序	插入顺序	字符串键按插入顺序，数字键按数字顺序
大小获取	size 属性	需要手动计算
遍历方式	内置遍历方法	需要 Object.keys() 等方法
适用场景	任意键类型的键值对	字符串键的键值对

实战：使用 Map 存储用户信息

const users = new Map();

// 添加用户
users.set(1, { id: 1, name: 'John', age: 30 });
users.set(2, { id: 2, name: 'Jane', age: 25 });
users.set(3, { id: 3, name: 'Bob', age: 35 });

// 获取用户
const user1 = users.get(1);
console.log(user1); // { id: 1, name: 'John', age: 30 }

// 遍历用户
users.forEach((user, id) => {
  console.log(`User ${id}: ${user.name}, ${user.age} years old`);
});
// User 1: John, 30 years old
// User 2: Jane, 25 years old
// User 3: Bob, 35 years old

// 检查用户是否存在
console.log(users.has(4)); // false

// 删除用户
users.delete(2);
console.log(users.size); // 2

Set 和 Map 的优势

1. Set：

   • 自动去重，无需手动处理
   • 查找效率高
   • 适合存储唯一值的集合

2. Map：

   • 键可以是任意类型
   • 键值对的有序性
   • 内置的遍历方法
   • 适合需要使用非字符串键的场景

通过本章节的学习，你已经掌握了 Set 和 Map 这两种新的数据结构。它们提供了更灵活的数据存储和操作方式，可以根据具体场景选择使用。