FrontEnd Interview

Appearance

_03_Map 和 Set 数据结构 ​

Map 摘要（API 表格） ​

方法/属性描述
new Map()创建一个新的 Map 实例
map.size返回 Map 中的键值对数量
map.set(key, value)向 Map 中添加键值对，返回 Map 本身
map.get(key)返回指定键对应的值，不存在则返回 undefined
map.has(key)判断 Map 中是否存在指定键，返回布尔值
map.delete(key)删除指定键的键值对，返回布尔值
map.clear()清空 Map 中的所有键值对
map.keys()返回包含所有键的迭代器
map.values()返回包含所有值的迭代器
map.entries()返回包含所有键值对的迭代器
map.forEach()遍历 Map 中的键值对

Map 基本用法示例 ​

js
// 1. 创建 Map 实例
const map = new Map();

// 2. 使用 set() 添加键值对
map.set('name', 'John');
map.set('age', 30);
map.set(true, '是');
map.set({id: 1}, '对象作为键');

// 3. 使用 get() 获取值
console.log('获取 name 值:', map.get('name')); // John
console.log('获取 true 值:', map.get(true));   // 是

// 4. 使用 has() 判断键是否存在
console.log('是否有 age 键:', map.has('age')); // true
console.log('是否有 gender 键:', map.has('gender')); // false

// 5. 查看 size 属性
console.log('Map 大小:', map.size); // 4

// 6. 使用 keys() 遍历键
console.log('所有键:');
for (const key of map.keys()) {
    console.log(key);
}

// 7. 使用 values() 遍历值
console.log('\n所有值:');
for (const value of map.values()) {
    console.log(value);
}

// 8. 使用 entries() 遍历键值对
console.log('\n所有键值对:');
for (const [key, value] of map.entries()) {
    console.log(`${key}: ${value}`);
}

// 9. 使用 forEach() 遍历
console.log('\nforEach 遍历:');
map.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

// 10. 使用 delete() 删除键值对
console.log('\n删除 age 键:', map.delete('age')); // true
console.log('删除后 size:', map.size); // 3

// 11. 使用 clear() 清空 Map
map.clear();
console.log('clear 后 size:', map.size); // 0

Set 摘要（API 表格） ​

方法/属性描述
new Set()创建一个新的 Set 实例
set.size返回 Set 中的元素数量
set.add(value)向 Set 中添加元素，返回 Set 本身
set.has(value)判断 Set 中是否存在指定元素，返回布尔值
set.delete(value)删除指定元素，返回布尔值
set.clear()清空 Set 中的所有元素
set.keys()返回包含所有元素的迭代器（与 values() 相同）
set.values()返回包含所有元素的迭代器
set.entries()返回包含所有元素的迭代器，每个元素是 [value, value] 形式
set.forEach()遍历 Set 中的元素

Set 基本用法示例 ​

js
// 1. 创建 Set 实例
const set = new Set();

// 2. 使用 add() 添加元素
set.add('apple');
set.add('banana');
set.add('orange');
set.add('apple'); // 重复元素不会被添加

// 3. 使用 has() 判断元素是否存在
console.log('是否有 banana:', set.has('banana')); // true
console.log('是否有 grape:', set.has('grape'));   // false

// 4. 查看 size 属性
console.log('Set 大小:', set.size); // 3（因为 apple 只被添加一次）

// 5. 使用 keys() 遍历元素
console.log('所有元素 (keys):');
for (const item of set.keys()) {
    console.log(item);
}

// 6. 使用 values() 遍历元素
console.log('\n所有元素 (values):');
for (const item of set.values()) {
    console.log(item);
}

// 7. 使用 entries() 遍历元素
console.log('\n所有元素 (entries):');
for (const entry of set.entries()) {
    console.log(entry); // 每个条目是 [value, value]
}

// 8. 使用 forEach() 遍历
console.log('\nforEach 遍历:');
set.forEach((value) => {
    console.log(value);
});

// 9. 使用 delete() 删除元素
console.log('\n删除 banana:', set.delete('banana')); // true
console.log('删除后 size:', set.size); // 2

// 10. 使用 clear() 清空 Set
set.clear();
console.log('clear 后 size:', set.size); // 0

// 特殊用法：数组去重
const numbers = [1, 2, 3, 2, 1, 4, 5, 4];
const uniqueNumbers = [...new Set(numbers)];
console.log('\n数组去重结果:', uniqueNumbers); // [1, 2, 3, 4, 5]

总结 ​

  • Map 是键值对的集合，与对象相比，Map 的键可以是任何类型（包括对象、函数等），并且能够保持插入顺序
  • Set 是唯一值的集合，自动去重，适合存储不重复的元素
  • 两者都提供了直观的遍历方法，并且在处理频繁添加/删除操作时性能通常优于对象和数组
  • Map 常用于需要存储键值对且键可能不是字符串的场景，Set 则适合需要确保元素唯一性的场景（如数组去重）