深入解析 ES6 集合：掌握 Map 与 Set 的现代应用

2026-02-10 09:17:27 0条评论 2次阅读 0人点赞

在 JavaScript 的发展历程中，ES6（ECMAScript 2015）无疑是一个里程碑式的版本。在此之前，当我们需要存储键值对或独特的数据集合时，往往不得不依赖普通的 Object（对象）。虽然对象非常强大，但在处理某些特定场景时，它们显得力不从心——比如对象的键只能是字符串或 Symbol，或者我们在遍历时需要担心继承而来的属性。

随着 Web 应用变得越来越复杂，我们需要更高效、更语义化的数据结构。幸运的是，ES6 为我们引入了专门的数据集合类型，这意味着我们不再仅仅依赖对象来存储数据，实现功能变得更加简单高效。

在这篇文章中，我们将深入探讨 ES6 带来的两个核心集合概念：Map（映射） 和 Set（集合）。我们会通过实际代码示例，详细讲解它们的工作原理、常用方法，以及如何在日常开发中避开常见的坑。

为什么我们需要新的数据结构？

在开始之前，让我们先思考一个问题：为什么不能一直用对象？

想象一下，你试图用对象来映射一个 DOM 节点到某些数据：

const map = {};
const key1 = { name: ‘header‘ };
const key2 = { name: ‘footer‘ };

map[key1] = ‘Header Data‘;
map[key2] = ‘Footer Data‘;

console.log(map[key1]); // 输出可能是 ‘Footer Data‘ 或其他不确定的值
// 因为对象键会自动调用 toString()，导致 key1 和 key2 都变成了 "[object Object]"

这就是 Map 登场的原因。它解决了键类型受限的问题，并提供了更直观的 API。

—

1. 深入理解 Map（映射）

Map 是一个包含任意类型键值对的有序集合。简单来说，Map 就是一个 键值对 的集合，但它的“键”可以是任何类型：对象、函数、甚至 NaN，而不仅仅是字符串。它在 JavaScript 中的工作方式类似于对象，但它维护了插入顺序，并提供了一套专门用于遍历和操作数据的 API。

1.1 创建与基本语法

创建一个 Map 非常简单：

// 创建一个新的空 Map
var map = new Map();

1.2 Map 的核心方法详解

让我们通过下表来快速了解 Map 提供的主要方法。这些方法是我们操作数据的基础工具：

Methods (方法)

Description (描述与实战见解)

—

—

map.size

它是一个属性（而非方法），用于确定 Map 中键值对的数量。这与数组的 INLINECODE3fea44c9 类似。

map.set(key, value)

它用于设置键的值。支持链式调用，这是它比对象赋值更优雅的地方。

map.has(key)

它检查 Map 中是否存在某个键，返回布尔值。比对象检查 INLINECODEe56da879 更安全。

map.get(key)

它获取与键关联的值。如果值不存在，则返回 INLINECODE5ab6728f。

map.keys()

它返回 Map 中所有键的迭代器，可用于 INLINECODE22c16254 循环。

map.entries()

它返回一个新的迭代器，包含按插入顺序排列的 [key, value] 数组。这是 Map 的默认迭代器。

map.values()

它返回 Map 中每个值的迭代器。

map.delete(key)

它用于删除某个特定键的条目。成功返回 true，失败返回 false。

map.clear()

它无参数地清除 Map 中的所有键值对，将 Map 重置为空。

map.forEach(callback)

它执行一次回调函数。注意：回调函数的参数顺序是。### 1.3 实战演练：Map 的常用操作

让我们来看一个实际的例子，演示如何使用 INLINECODEe5ba0708 和 INLINECODE1f3b84dc 方法来管理数据。

#### 程序 1: 数据计数与初始化

在这个场景中，我们需要维护一个动态的配置列表。

// 演示 Map.size 和 Map.set 的 JavaScript 程序

var config = new Map();

// 使用 set 添加配置项
config.set(‘theme‘, ‘dark‘);
config.set(‘language‘, ‘zh-CN‘);
config.set(‘version‘, 1.0);

// 直接访问 size 属性获取数量
document.write("配置项总数: " + config.size); // 输出: 配置项总数: 3

输出:

配置项总数: 3

#### 程序 2: 复杂的数据操作（增删改查）

让我们通过一个更复杂的例子，看看 INLINECODE1d48d412、INLINECODEaf8575af、INLINECODEfa84677e 和 INLINECODE69cb98e2 是如何协作的。在这个例子中，我们将模拟一个简单的用户会话管理。


// 模拟用户会话管理的 Map 操作程序
var session = new Map(); 

// 1. 设置初始数据
session.set("userId", "User_001"); 
session.set("isLoggedIn", true);

document.write("用户 ID: " + session.get("userId") + "
");

// 2. 批量添加更多数据
session.set("role", "admin"); 
session.set("token", "xy783-22-11");

// 3. 检查状态
// 使用 has() 检查特定键是否存在
document.write("是否有管理员权限? - " + session.has("role") + "
");
document.write("是否有购物车数据? - " + session.has("cart") + "
");

// 4. 删除特定数据
session.delete("token"); // 撤销 token
document.write("Token 已移除
");

// 验证删除结果
document.write("Token 是否还存在? - " + session.has("token") + "
"); // false

// 5. 清空所有数据
session.clear();
document.write("会话已结束 (Map 已清空)
");
document.write("是否还有登录状态? - " + session.has("isLoggedIn")); // false

输出:

用户 ID: User_001
是否有管理员权限? - true
是否有购物车数据? - false
Token 已移除
Token 是否还存在? - false
会话已结束 (Map 已清空)
是否还有登录状态? - false

1.4 迭代与遍历：Map 的强大之处

Map 最迷人的地方在于它的可迭代性。ES6 引入了 INLINECODE3574630f 循环，它提供了一种非常简洁和清晰的语法来遍历所有种类的 可迭代对象。不同于 INLINECODE5ebdbf69 循环遍历键，for...of 直接遍历值，并且适用于 Map、Set、Array 甚至字符串。

#### 程序 3: 使用 forEach 遍历 Map

INLINECODE9810dce3 是处理集合数据的利器。需要注意的是，Map 的 INLINECODEc328e7b8 回调函数参数顺序与 Array 略有不同。


// 演示 Map.forEach() 遍历的程序

var scores = new Map();
scores.set(‘Alice‘, 95);
scores.set(‘Bob‘, 88);
scores.set(‘Charlie‘, 92);

// 使用 forEach 遍历
// 注意：第一个参数是值，第二个参数是键
scores.forEach((value, key) => {
    document.write(`学生: ${key}, 分数: ${value} 
`);
});

输出:

学生: Alice, 分数: 95
学生: Bob, 分数: 88
学生: Charlie, 分数: 92

#### 程序 4: 获取所有键

有时候我们只关心键（例如用户ID列表），这时可以使用 keys() 方法。


// 演示 Map.keys() 迭代器的程序

var envVars = new Map();
envVars.set(‘NODE_ENV‘, ‘production‘);
envVars.set(‘PORT‘, ‘8080‘);
envVars.set(‘DEBUG‘, ‘false‘);

var keysIterator = envVars.keys();

// 使用 next() 手动迭代
document.write("环境变量 Key 1: " + keysIterator.next().value + "
"); // "NODE_ENV"
document.write("环境变量 Key 2: " + keysIterator.next().value + "
"); // "PORT"
document.write("环境变量 Key 3: " + keysIterator.next().value + "
"); // "DEBUG"
document.write("后续迭代: " + keysIterator.next().value + "
"); // undefined (已遍历完)

输出:

环境变量 Key 1: NODE_ENV
环境变量 Key 2: PORT
环境变量 Key 3: DEBUG
后续迭代: undefined

#### 程序 5: 获取键值对条目

INLINECODE2743a226 方法返回一个包含 INLINECODE08c4b4c7 对的迭代器。这是 Map 的默认迭代行为，这意味着我们可以直接对 Map 使用 for...of 循环来获取条目。


// 演示 Map.entries() 的程序

var fruits = new Map();
fruits.set(‘Apple‘, 10);
fruits.set(‘Banana‘, 5);
fruits.set(‘Cherry‘, 20);

var iterator = fruits.entries();

// 获取第一个条目 [‘Apple‘, 10]
// 注意：value 是一个包含键和值的数组
document.write("条目 1: " + iterator.next().value + "
");
document.write("条目 2: " + iterator.next().value + "
");
document.write("条目 3: " + iterator.next().value + "
");

// 最佳实践：直接使用 for...of 解构
document.write("
使用 for...of 解构遍历:
");
for (let [key, value] of fruits) {
    document.write(`${key} => ${value} 
`);
}

输出:

条目 1: Apple,10
条目 2: Banana,5
条目 3: Cherry,20

使用 for...of 解构遍历:
Apple => 10
Banana => 5
Cherry => 20

—

2. 深入理解 Set（集合）

除了 Map，ES6 还引入了 Set。Set 是值的集合，其中的值是唯一的。这意味着 Set 中不会出现重复的值。这对于去重操作非常有用。

2.1 Set 的创建与语法

var set = new Set();

2.2 Set 的核心方法

Set 的 API 与 Map 类似，但操作的是单个值而不是键值对：

Methods (方法)

Description (描述)

—

—

set.add(value)

添加值。如果值已存在，则不会添加（Set 自动去重）。返回 Set 实例本身（支持链式调用）。

set.has(value)

检查 Set 中是否存在某个值。

set.delete(value)

删除特定值。

set.clear()

清空 Set。

set.size

返回 Set 中元素的数量。### 2.3 实战示例：数组去重

这是 Set 在 JavaScript 中最经典的应用场景之一。以前我们需要写复杂的循环来去重，现在一行代码就能搞定。


// 使用 Set 进行数组去重
var numbers = [1, 2, 2, 3, 4, 4, 5];
var uniqueSet = new Set(numbers);

// 将 Set 转回数组
var uniqueArr = [...uniqueSet];

document.write("原数组: " + numbers.join(", ") + "
");
document.write("去重后: " + uniqueArr.join(", "));

输出:

原数组: 1, 2, 2, 3, 4, 4, 5
去重后: 1, 2, 3, 4, 5

—

3. 性能优化与最佳实践

在掌握了基本用法后，作为经验丰富的开发者，我们需要关注性能和最佳实践。

3.1 频繁增删场景下的选择

在涉及到大量的数据添加和删除操作时，Map 通常比普通对象表现更好。因为 V8 引擎（Chrome 和 Node.js 的核心）对 Map 进行了特殊的优化，使其在处理动态数据时不需要像对象那样处理隐藏类或导致结构变慢。

3.2 内存占用

虽然 Map 提供了更多的功能，但为了保持弱的引用支持（WeakMap除外）和有序性，纯数据存储下，Map 的内存占用通常会比普通对象稍高一点。如果你的数据是静态配置且不需要复杂遍历，普通对象依然是一个不错的选择。

3.3 JSON 序列化问题

这是一个常见的陷阱。JSON.stringify() 并不原生支持 Map。如果你尝试将 Map 转换为 JSON，你会得到一个空对象 {}。

解决方案： 使用 Object.fromEntries(map) 先转换为对象，或者手动转换。

var map = new Map();
map.set(‘foo‘, ‘bar‘);

// 错误做法
// JSON.stringify(map) -> "{}"

// 正确做法
var json = JSON.stringify(Object.fromEntries(map)); // "{\"foo\":\"bar\"}"

3.4 键的等价性比较

Map 的键匹配是基于“SameValueZero”算法。这意味着虽然大多数情况下与 INLINECODE2e462b02 一致，但对于 INLINECODE7e4a8191，Map 认为它是等于自身的。

var map = new Map();
map.set(NaN, "Not a Number");
map.get(NaN); // "Not a Number" (在对象中这很难做到)

—

4. 总结

ES6 引入的 Collection 类型彻底改变了我们编写 JavaScript 的方式。

  • Map 为我们提供了灵活的键类型和高效的 API，特别适合作为数据字典或缓存使用。
  • Set 则是处理唯一值数据的绝佳工具，让数据清洗变得异常简单。
  • for…of 循环为这两种数据结构提供了统一的、优雅的遍历方式。

当你需要在项目中存储键值数据时，问问自己：“我的键是不是只有字符串？”如果答案是“不”，或者你需要频繁地增删数据，那么请毫不犹豫地选择 Map。当你需要确保数据唯一性时，Set 是你的不二之选。

希望这篇文章能帮助你更好地理解和应用这些强大的特性！继续探索现代 JavaScript 的奥秘吧。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/42440.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年