JavaScript Set迭代器用法：keys、values与entries实例

在 JavaScript 中，Set 是一种存储唯一值的数据结构。为了在 API 接口上与 Map 保持统一规范，ES6 为 Set 实例提供了三个专门的迭代器生成方法：keys()、values() 和 entries()。理解它们的设计逻辑与返回形式，能帮助我们更熟练地进行集合遍历、去重转换和与键值对体系对接。

一、Set 迭代器的基本设计原理与对比

Set 集合没有真正意义上的“键（Key）”，它只存储纯粹的“值（Value）”。然而，为了保证所有集合对象在 JavaScript 迭代协议（Iteration Protocols）下拥有对称的 API 设计，规范规定：在 Set 中，键与值等价。

• set.values()：返回一个新的迭代器对象，按元素插入顺序依次产生集合中的每一个值。
• set.keys()：在 Set 中完全是 values() 的别名，返回与 values() 行为完全相同的迭代器。
• set.entries()：返回一个新的迭代器对象，每一个迭代项都是形如 [value, value] 的二元数组，其中键和值均为该元素本身。

图 1：Set 元素与三大迭代器输出形态映射

二、values() 与 keys() 实例与使用方式

因为 Set.prototype.keys === Set.prototype.values，二者在底层的实现指针完全相同。在日常编写代码时，values() 更符合语义，也是 Set.prototype[Symbol.iterator] 的默认实现。

1. 使用 for...of 遍历 values()

const fruits = new Set(['苹果', '香蕉', '橙子']);

// 直接调用 values() 遍历
for (const value of fruits.values()) {
  console.log(value);
}
// 示例输出:
// 苹果
// 香蕉
// 橙子

// keys() 的产出完全相同
for (const key of fruits.keys()) {
  console.log(key);
}
// 示例输出同上

2. 手动调用迭代器的 next() 方法

迭代器不仅可以用于循环，还可以通过 next() 手动控制消费节奏：

const colors = new Set(['红', '绿', '蓝']);
const colorIterator = colors.values();

console.log(colorIterator.next()); // { value: '红', done: false }
console.log(colorIterator.next()); // { value: '绿', done: false }
console.log(colorIterator.next()); // { value: '蓝', done: false }
console.log(colorIterator.next()); // { value: undefined, done: true }

图 2：迭代器手动遍历状态转移时序

三、entries() 实例与跨数据结构互通

初学者常常困惑：既然 Set 中没有键，为什么还需要 entries() 返回 [value, value]？其核心价值在于与 Map 保持接口契约统一，使通用函数可以无缝处理多种集合数据。

1. entries() 基本用法与解构

const tags = new Set(['前端', 'JavaScript', 'Web']);

for (const [key, val] of tags.entries()) {
  console.log(`键: ${key}, 值: ${val}`);
}
// 示例输出:
// 键: 前端, 值: 前端
// 键: JavaScript, 值: JavaScript
// 键: Web, 值: Web

2. 利用 entries() 将 Set 快速转换为 Map

因为 new Map() 构造函数接收一个可迭代的键值对数组（如 [[k1, v1], [k2, v2]]），我们可以直接将 set.entries() 传入 Map 构造函数：

const userIds = new Set([101, 102, 103]);

// 直接通过 entries 构建 Map，键与值皆为用户 ID
const idMap = new Map(userIds.entries());

console.log(idMap.get(101)); // 示例输出: 101
console.log(idMap.has(102)); // 示例输出: true

图 3：基于 entries() 的 Set 到 Map 转换数据流

四、实际应用技巧与常见避坑点

1. 展开运算符快速将迭代器转换为数组

迭代器本身是一次性消费的流，如果需要对结果使用 filter、map 等数组方法，可以使用扩展运算符（...）或 Array.from()：

const numSet = new Set([10, 20, 30]);

// 将 values 迭代器展开为数组
const numArr = [...numSet.values()];
console.log(numArr); // 示例输出: [10, 20, 30]

// 将 entries 展开为二维数组
const entryArr = [...numSet.entries()];
console.log(entryArr); // 示例输出: [[10, 10], [20, 20], [30, 30]]

2. 迭代过程中的元素修改行为

JavaScript 中的 Set 迭代器严格遵循插入顺序。如果在遍历过程中向 Set 增加新元素，新加入的元素也会被当前的迭代器所访问到；但如果反复修改集合，容易引发死循环，编写时需格外谨慎。

五、总结：三大迭代器选型速查

为了在实际编码中做出最清晰、规范的选择，下表总结了三者的特性差异：

图 4：Set 迭代器选型与决策决策矩阵