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

JavaScript中的Set和Map

news 2026/7/15 4:01:18

一、前言：为什么需要 Set 和 Map？

在 JavaScript 中，数组（Array）和对象（Object）是最常用的数据结构，但它们在特定场景下存在明显短板：

数组查找元素需遍历，时间复杂度 O (n)，且去重需额外处理；

对象的键只能是字符串 /.Symbol，无法直接使用引用类型作为键，且无法快速获取键值对数量。

ES6 引入的Set（集合）和Map（映射），正是为解决这些痛点而生 —— 它们提供了更高效的查找、插入、删除操作，以及更灵活的键类型支持，成为复杂业务场景的优选数据结构。

二、Set：不重复元素的有序集合

2.1 核心特性

元素唯一：自动去重，重复添加的元素会被忽略；

有序存储：按插入顺序保存元素（ES6 规范），遍历顺序与插入顺序一致；

支持多种类型：可存储字符串、数字、布尔值、引用类型（对象、数组等）；

无键名只有值：本质是 “值 - 值” 映射，可理解为 “只有键的数组”。

2.2 常用 API（含示例）

// 1. 初始化

const set = new Set([1, 2, 2, 'a', true]); // 自动去重：Set(4) {1, 2, 'a', true}

// 2. 增删改查

set.add(3); // 添加元素：Set(5) {1, 2, 'a', true, 3}

set.delete('a'); // 删除元素：返回true（成功）/false（失败）

set.has(2); // 查找元素：返回true

set.size; // 获取长度：4

set.clear(); // 清空集合：Set(0) {}

// 3. 遍历方式

const set2 = new Set(['x', 'y', 'z']);

// 方式1：for...of遍历

for (const val of set2) {

console.log(val); // x, y, z

}

// 方式2：forEach遍历

set2.forEach((val, index) => {

console.log(val); // x, y, z（index与val相同）

});

// 方式3：转换为数组

const arr = [...set2]; // ['x', 'y', 'z']

2.3 实战场景

数组去重：const uniqueArr = [...new Set(arr)];（简洁高效，时间复杂度 O (n)）；

数据筛选：存储不重复的 ID、标签等，如const userIds = new Set(['101', '102', '101']);；

快速判断存在性：比数组indexOf更高效（Set 查找为 O (1)，数组为 O (n)）。

三、Map：键值对的灵活映射

3.1 核心特性

键类型无限制：可使用字符串、数字、对象、数组、Symbol 等作为键；

有序存储：按插入顺序保存键值对，遍历顺序与插入顺序一致；

键唯一：重复设置同一键会覆盖旧值；

可迭代：支持直接遍历，无需像对象那样先获取键数组。

3.2 常用 API（含示例）

// 1. 初始化

const map = new Map([

['name', '张三'],

[18, '年龄'],

[{ id: 1 }, '用户信息'] // 对象作为键

]);

// 2. 增删改查

map.set('gender', '男'); // 添加键值对：Map(4) {['name','张三'], [18,'年龄'], [{id:1},'用户信息'], ['gender','男']}

map.get(18); // 获取值：'年龄'

map.has('name'); // 查找键：true

map.delete({ id: 1 }); // 注意：对象键是引用类型，需用同一引用才能删除

map.size; // 获取长度：3

map.clear(); // 清空映射

// 3. 遍历方式

const map2 = new Map([['a', 1], ['b', 2]]);

// 方式1：遍历键值对（最常用）

for (const [key, val] of map2) {

console.log(key, val); // a 1, b 2

}

// 方式2：遍历键/值

for (const key of map2.keys()) { /* 遍历键 */ }

for (const val of map2.values()) { /* 遍历值 */ }

// 方式3：forEach遍历

map2.forEach((val, key) => {

console.log(key, val); // a 1, b 2

});

3.3 关键注意点

引用类型作为键：对象、数组等引用类型作为键时，只有引用完全一致才视为同一键：

const obj1 = { id: 1 };

const obj2 = { id: 1 };

const map = new Map([[obj1, 'test']]);

map.get(obj2); // undefined（obj1与obj2是不同引用）

与对象的区别：

特性	Map	Object
键类型	任意类型	字符串 / Symbol
遍历顺序	插入顺序	无序（ES6 前）
长度获取	size 属性直接获取	需手动计算（Object.keys (obj).length）
迭代性	直接迭代	需先获取键数组

四、Set 与 Map 的核心区别与选型建议

4.1 核心区别

维度	Set	Map
存储结构	单值集合（值 - 值）	键值对映射（键 - 值）
核心用途	存储不重复元素	键值对关联查询
常用操作	去重、判断存在性	键值映射、数据关联
遍历返回值	直接返回元素	返回 [key, value] 数组