JavaScript Set转Array的三种方法：扩展运算符与Array.from

方法一：扩展运算符（Spread Operator）—— 极简直观的语法糖

扩展运算符 ... 是 ES6（ECMAScript 2015）引入的核心特性之一。在数组字面量中对 Set 使用扩展运算符，能够以单行代码快速将集合中的所有元素解构并展开到新数组中。

1. 完整代码示例

// 声明一个包含重复元素的初始列表
const tagSet = new Set(['JavaScript', 'TypeScript', 'Node.js', 'JavaScript']);

// 使用扩展运算符快速转换为数组
const tagArray = [...tagSet];

// 输出结果验证
console.log(tagArray); 
// 示例输出: ['JavaScript', 'TypeScript', 'Node.js']

console.log(Array.isArray(tagArray)); 
// 示例输出: true

扩展运算符之所以能展开 Set，核心在于 Set 原型上默认实现了 [Symbol.iterator] 可迭代协议。JavaScript 引擎在解析 [...set] 语法时，会自动向 Set 请求迭代器，并逐次调用其 next() 方法，把产出的各个 value 依次按顺序推入新建的数组字面量中，直到迭代状态变为完成。

2. 适用场景与工程优劣

• 极简优雅：代码篇幅最短，是目前现代前端团队中使用最普遍的写法。
• 经典去重连招：常用于数组就地去重，如 const uniqueList = [...new Set(rawList)];。
• 局限性：只负责展开原样元素。如果希望在转换的同时对元素进行字段抽取或二次加工，必须额外调用 [...set].map(...)，这会产生一个无用的中间过渡数组，增加垃圾回收（GC）负担。

方法二：Array.from() —— 转换与元素映射兼备的原生方案

Array.from() 是 Array 构造函数上的静态方法，专门用于将类数组对象（array-like object）以及任何可迭代对象（iterable object）转换为真正的数组实例。与扩展运算符相比，它不仅语义明确，还提供了一个非常关键的内置参数：mapFn 映射函数。

1. 完整代码示例

// 基础转换：直接传入 Set
const userIdSet = new Set(['u_101', 'u_102', 'u_103']);
const userIdList = Array.from(userIdSet);
console.log(userIdList);
// 示例输出: ['u_101', 'u_102', 'u_103']

// 进阶用法：借助第二个参数 mapFn 在转换时同步重塑结构
const userObjects = Array.from(userIdSet, (id, index) => ({
  id,
  index,
  active: true
}));

console.log(userObjects);
/* 示例输出:
[
  { id: 'u_101', index: 0, active: true },
  { id: 'u_102', index: 1, active: true },
  { id: 'u_103', index: 2, active: true }
]
*/

方法三：循环遍历收集（forEach 与 for...of）—— 复杂逻辑与边界控制

除了依赖语法糖和高阶函数，使用循环遍历手动将元素推入新数组是第三种经典方式。通常可选用 Set.prototype.forEach 或者 for...of 语句。

1. 完整代码示例

const scoreSet = new Set([88, 95, 60, 45, 72]);

// 方式 3A：利用 for...of 语句（支持提前 break 中断与复杂分支过滤）
const qualifiedScores = [];
for (const score of scoreSet) {
  if (score < 60) {
    continue; // 过滤不及格分数
  }
  qualifiedScores.push(score);
}
console.log(qualifiedScores);
// 示例输出: [88, 95, 60, 72]

// 方式 3B：利用 Set 原型上的 forEach 收集
const allScores = [];
scoreSet.forEach(item => allScores.push(item));
console.log(allScores);
// 示例输出: [88, 95, 60, 45, 72]

尽管对于单纯的类型转换而言，手动循环比 [...set] 和 Array.from() 显得冗长，但在处理更严格的工程场景时，它具备不可替代的灵活性：

• 按需截断退出：[...set] 和 Array.from() 必须完整消费整个 Set。而 for...of 可以在达成特定数量（例如“只取前 10 个匹配元素”）时通过 break 立即终止循环，在超大集合处理时能节省大量运算。
• 异步前置处理：在处理异步业务时，可以在 for...of 循环体内配合 await 进行异步请求或校验，逐步向结果数组中追加有效项。

三种方法的横向对比与技术选型

为了在日常开发与架构设计中做出最佳权衡，下表汇总了三种方法在代码复杂度、二次加工能力、执行机制及适用场景上的核心差异：

实践中的注意事项与常见疑问

1. 集合内存储对象时，转换后是深拷贝还是浅拷贝？

不论使用扩展运算符、Array.from() 还是循环遍历，得到的均为浅拷贝（Shallow Copy）。如果 Set 中存储的是对象、数组等引用数据类型，新数组中存放的依然是指向原对象的内存地址引用。修改数组中对象的属性，原 Set 内部对象也会同步改变。若需要完全隔离，需在映射步骤中显式进行结构克隆（如使用 structuredClone()）。

2. 转换空 Set 时是否会产生异常？

所有三种方法对空 Set 均完全安全。对于 new Set()，[...emptySet] 和 Array.from(emptySet) 都会安全返回一个长度为 0 的新空数组 []，不会抛出异常或产生 undefined 槽位。

3. TypeScript 中的类型推导表现

在 TypeScript 项目中，如果变量类型为 Set<T>，执行 const arr = [...set]; 或 const arr = Array.from(set);，编译器均能精准自动推断出 arr 的类型为 T[]。当使用 Array.from(set, x => x.id) 时，返回类型也会自然推断为 mapFn 返回值构成的 R[]，完全享有端到端的类型安全保障。