Set与Array的区别及转换

在 JavaScript 中，Set 和 Array 都是用于存储数据的集合类型，但它们在设计目的、特性和使用场景上有显著差异。以下是它们的核心区别、适用场景及互相转换方法：

---

一、核心区别

特性	Set	Array
元素唯一性	自动去重，值唯一	允许重复值
元素顺序	按插入顺序存储	按索引顺序存储
查找性能	has() 方法高效（O(1)）	includes() 方法较慢（O(n)）
操作方法	add(), delete(), clear	push(), pop(), splice 等
索引访问	不支持索引访问（如 set[0]）	支持索引访问（如 arr[0]）
迭代方式	支持 for...of 和 forEach	支持 for、for...of 及高阶函数（如 map、filter）

---

二、使用场景

优先使用 Set 的情况：

1. 需要自动去重
   例如：收集用户标签、过滤重复日志、统计唯一访问者。

   const uniqueTags = new Set(['js', 'css', 'js']); // Set(2) { 'js', 'css' }
   

2. 需要快速判断元素是否存在
   例如：检查权限列表、缓存验证。

   const permissions = new Set(['read', 'write']);
   if (permissions.has('read')) { /* ... */ }
   

3. 需要高效增删元素
   Set 的 add 和 delete 操作时间复杂度为 O(1)，适合频繁增删场景。

---

优先使用 Array 的情况：

1. 需要保留重复元素
   例如：记录用户操作日志、保存订单列表。

2. 需要索引访问或顺序操作
   例如：分页数据、排序、截取子数组。

   const sortedArr = [3, 1, 2].sort(); // [1, 2, 3]
   

3. 需要高阶函数处理数据
   例如：使用 map、filter、reduce 转换数据。

   const doubled = [1, 2, 3].map(x => x * 2); // [2, 4, 6]
   

---

三、互相转换

1. Array → Set

直接通过 Set 构造函数转换，自动去重：

const arr = [1, 2, 2, 3];
const set = new Set(arr); // Set(3) { 1, 2, 3 }

2. Set → Array

使用 Array.from() 或扩展运算符（...）转换：

const set = new Set([1, 2, 3]);

// 方法1：Array.from()
const arr1 = Array.from(set); // [1, 2, 3]

// 方法2：扩展运算符
const arr2 = [...set]; // [1, 2, 3]

---

四、结合使用示例

数组去重

const arr = [1, 2, 2, 3];
const uniqueArr = [...new Set(arr)]; // [1, 2, 3]

交集/并集/差集

const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);

// 并集
const union = new Set([...setA, ...setB]); // {1, 2, 3, 4}

// 交集
const intersection = new Set([...setA].filter(x => setB.has(x))); // {2, 3}

// 差集（A - B）
const difference = new Set([...setA].filter(x => !setB.has(x))); // {1}

---

五、总结

• 选择 Set：需去重、快速查找、高效增删元素的场景。
• 选择 Array：需保留重复、索引访问、高阶函数操作的场景。
• 转换技巧：
  • 用 new Set(arr) 实现数组去重。
  • 用 Array.from(set) 或 [...set] 将 Set 转为数组。