JavaScript Set 用法整理（速查版）

 

一、Set 是什么（一句话）

Set 是一个只允许“唯一值”的集合，常用于去重和快速查找。

二、创建 Set

1️⃣ 空 Set

const s = new Set();

2️⃣ 由数组创建（最常见）

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

3️⃣ 由字符串创建

new Set('hello');
// Set { 'h', 'e', 'l', 'o' }

三、核心 API（100% 会用到）

✅ add(value) 添加

s.add(4);

可链式：

s.add(5).add(6);

✅ has(value) 判断是否存在 ⭐

s.has(2); // true

✅ delete(value) 删除

s.delete(3); // true

✅ clear() 清空

s.clear();

✅ size 元素数量（属性）

s.size;

四、遍历 Set

1️⃣ for...of（推荐）

for (const v of s) {
  console.log(v);
}

2️⃣ forEach

s.forEach(v => {
  console.log(v);
});

3️⃣ values() / keys() / entries()

s.values();  // SetIterator
s.keys();    // 和 values 一样
s.entries(); // [value, value]

五、Set ⇄ Array 转换（最重要）

⭐ Set → Array（常用）

const arr = [...s];
// 或
Array.from(s);

⭐ Array → Set（去重）

const uniqueArr = [...new Set(arr)];

六、最常见实战场景 ⭐⭐⭐

1️⃣ 数组去重（99% 使用场景）

const ids = [1, 2, 2, 3];
const uniqueIds = [...new Set(ids)];

2️⃣ 快速判断是否存在（比数组快）

const whiteList = new Set(['a', 'b', 'c']);

if (whiteList.has(key)) {
  // 允许
}

3️⃣ 两个数组求交集

const a = [1, 2, 3];
const b = [2, 3, 4];

const setB = new Set(b);
const intersection = a.filter(x => setB.has(x));
// [2, 3]

4️⃣ 去重 + 业务处理

[...new Set(ids)].map(id => ({ id }));

七、Set 的“坑位提醒”⚠️

❌ 1️⃣ Set 没有 map / filter

s.map(...) // ❌

正确做法：

[...s].map(...)

❌ 2️⃣ 对象不会“按内容去重”

new Set([{ a: 1 }, { a: 1 }]);
// 不会去重！

👉 如果是对象去重，用 Map 更合适。

 

八、什么时候该用 Set？（决策口诀）

✔ 去重
✔ 高频 has 判断
❌ 要顺序逻辑 / map / filter → 用 Array
❌ key-value → 用 Map

---

九、终极记忆版（一句话）

Set = 去重 + 超快查找的集合，用完常转回数组。

如果你愿意，下一步我可以直接结合你常写的 Vue / React / three.js / 表格选择 场景，给你一版“看到就知道该用 Set 的代码模板”。