JavaScript Set 方法详解#

1. Set 是什么？#

Set 是 ES6 引入的一种新的数据结构，它类似于数组，但成员的值都是唯一的，没有重复的值。

1
// 创建一个 Set
2
const mySet = new Set();
3

4
// 或者从数组创建
5
const setFromArray = new Set([1, 2, 3, 3, 4]); // 会自动去重
6
console.log(setFromArray); // Set(4) {1, 2, 3, 4}

2. Set 的基本方法#

2.1 添加元素：`add()`#

1
const set = new Set();
2

3
// 添加单个元素
4
set.add(1);
5
set.add(2);
6
set.add(2); // 重复添加，不会被添加进去
7

8
// 链式调用
9
set.add(3).add(4).add(5);
10

11
// 可以添加任意类型的值
12
set.add("hello");
13
set.add({ name: "John" });
14
set.add([1, 2, 3]);
15
set.add(NaN); // NaN 在 Set 中也是唯一的
16
set.add(NaN); // 不会添加第二个 NaN
17

18
console.log(set.size); // 查看大小

2.2 删除元素：`delete()`#

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

3
// 删除指定值
4
set.delete(3); // 删除 3
5
console.log(set); // Set(4) {1, 2, 4, 5}
6

7
// 删除不存在的值返回 false
8
console.log(set.delete(10)); // false
9

10
// 删除对象引用需要相同的引用
11
const obj = { name: "John" };
12
set.add(obj);
13
console.log(set.delete({ name: "John" })); // false，因为不是同一个引用
14
console.log(set.delete(obj)); // true，删除成功

2.3 检查存在：`has()`#

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

3
console.log(set.has(2)); // true
4
console.log(set.has(10)); // false
5

6
// 对于 NaN，Set 能正确处理
7
set.add(NaN);
8
console.log(set.has(NaN)); // true

2.4 清空 Set：`clear()`#

1
const set = new Set([1, 2, 3, 4, 5]);
2
console.log(set.size); // 5
3

4
set.clear();
5
console.log(set.size); // 0
6
console.log(set); // Set(0) {}

3. Set 的遍历方法#

3.1 `forEach()`#

1
const set = new Set(["apple", "banana", "orange"]);
2

3
// 遍历每个元素
4
set.forEach((value, key, set) => {
5
  // Set 的 key 和 value 相同
6
  console.log(`${key}: ${value}`);
7
});
8

9
// 输出：
10
// apple: apple
11
// banana: banana
12
// orange: orange

3.2 `keys()`、`values()`、`entries()`#

1
const set = new Set(["a", "b", "c"]);
2

3
// keys() - 返回键名的遍历器
4
for (let key of set.keys()) {
5
  console.log(key); // a, b, c
6
}
7

8
// values() - 返回键值的遍历器（Set 的键和值相同）
9
for (let value of set.values()) {
10
  console.log(value); // a, b, c
11
}
12

13
// entries() - 返回键值对的遍历器
14
for (let entry of set.entries()) {
15
  console.log(entry); // ['a', 'a'], ['b', 'b'], ['c', 'c']
16
}

4. Set 的特性#

4.1 唯一性#

1
// 自动去重
2
const arr = [1, 2, 2, 3, 3, 3, 4, 5];
3
const uniqueSet = new Set(arr);
4
console.log([...uniqueSet]); // [1, 2, 3, 4, 5]
5

6
// 对象引用不同，不算重复
7
const obj1 = { id: 1 };
8
const obj2 = { id: 1 };
9
const objSet = new Set([obj1, obj2, obj1]);
10
console.log(objSet.size); // 2，obj1 和 obj2 被认为是不同的

4.2 与数组的对比#

1
// 查找元素
2
const arr = [1, 2, 3, 4, 5];
3
const set = new Set(arr);
4

5
// 数组查找是 O(n)
6
console.log(arr.includes(3)); // true，需要遍历
7

8
// Set 查找是 O(1)
9
console.log(set.has(3)); // true，哈希查找，更快
10

11
// 判断是否重复
12
const hasDuplicates = (array) => {
13
  return new Set(array).size !== array.length;
14
};
15

16
console.log(hasDuplicates([1, 2, 3, 3])); // true
17
console.log(hasDuplicates([1, 2, 3, 4])); // false

4.3 迭代顺序#

1
// Set 的遍历顺序就是插入顺序
2
const set = new Set();
3
set.add(3);
4
set.add(1);
5
set.add(2);
6

7
for (let item of set) {
8
  console.log(item); // 3, 1, 2（插入顺序）
9
}
10

11
// 与对象不同，对象的键顺序不保证
12
const obj = { 3: "a", 1: "b", 2: "c" };
13
console.log(Object.keys(obj)); // ['1', '2', '3']（数字键会排序）

5. 实际应用场景#

5.1 数组去重（最常用）#

1
// 传统方法
2
function uniqueArray(arr) {
3
  return [...new Set(arr)];
4
}
5

6
// 使用
7
const numbers = [1, 2, 3, 3, 4, 4, 5];
8
console.log(uniqueArray(numbers)); // [1, 2, 3, 4, 5]
9

10
// 字符串去重
11
const str = "hello world";
12
const uniqueChars = [...new Set(str)].join("");
13
console.log(uniqueChars); // 'helo wrd'

5.2 求交集、并集、差集#

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

4
// 并集
5
const union = new Set([...setA, ...setB]);
6
console.log([...union]); // [1, 2, 3, 4, 5, 6]
7

8
// 交集
9
const intersection = new Set([...setA].filter((x) => setB.has(x)));
10
console.log([...intersection]); // [3, 4]
11

12
// 差集（A 有 B 没有）
13
const difference = new Set([...setA].filter((x) => !setB.has(x)));
14
console.log([...difference]); // [1, 2]

5.3 数据筛选#

1
// 从数组中过滤出唯一的元素
2
const data = [
3
  { id: 1, name: "Alice" },
4
  { id: 2, name: "Bob" },
5
  { id: 1, name: "Alice" }, // 重复
6
  { id: 3, name: "Charlie" },
7
];
8

9
// 基于 id 去重
10
const seen = new Set();
11
const uniqueData = data.filter((item) => {
12
  if (seen.has(item.id)) {
13
    return false;
14
  } else {
15
    seen.add(item.id);
16
    return true;
17
  }
18
});
19

20
console.log(uniqueData);
21
// [
22
//     { id: 1, name: 'Alice' },
23
//     { id: 2, name: 'Bob' },
24
//     { id: 3, name: 'Charlie' }
25
// ]

5.4 标签/分类系统#

1
class TagSystem {
2
  constructor() {
3
    this.tags = new Set();
4
  }
5

6
  addTag(tag) {
7
    this.tags.add(tag.toLowerCase());
8
    return this;
9
  }
10

11
  removeTag(tag) {
12
    this.tags.delete(tag.toLowerCase());
13
    return this;
14
  }
15

16
  hasTag(tag) {
17
    return this.tags.has(tag.toLowerCase());
18
  }
19

20
  getAllTags() {
21
    return [...this.tags];
22
  }
23

24
  merge(otherTagSystem) {
25
    otherTagSystem.tags.forEach((tag) => this.tags.add(tag));
26
    return this;
27
  }
28
}
29

30
// 使用
31
const articleTags = new TagSystem();
32
articleTags.addTag("JavaScript").addTag("Tutorial").addTag("JavaScript"); // 不会重复添加
33

34
console.log(articleTags.getAllTags()); // ['javascript', 'tutorial']

6. Set 性能优势#

1
// 测试查找性能
2
const largeArray = Array.from({ length: 1000000 }, (_, i) => i);
3
const largeSet = new Set(largeArray);
4

5
console.time("Array查找");
6
largeArray.includes(999999);
7
console.timeEnd("Array查找"); // 约 0.5-1ms
8

9
console.time("Set查找");
10
largeSet.has(999999);
11
console.timeEnd("Set查找"); // 约 0.01ms
12

13
// 测试重复检查性能
14
const checkDuplicatesArray = (arr) => {
15
  for (let i = 0; i < arr.length; i++) {
16
    for (let j = i + 1; j < arr.length; j++) {
17
      if (arr[i] === arr[j]) return true;
18
    }
19
  }
20
  return false;
21
};
22

23
const checkDuplicatesSet = (arr) => {
24
  return new Set(arr).size !== arr.length;
25
};
26

27
const testArray = Array.from({ length: 10000 }, () =>
28
  Math.floor(Math.random() * 1000)
29
);
30

31
console.time("数组检查重复");
32
checkDuplicatesArray(testArray);
33
console.timeEnd("数组检查重复"); // 慢
34

35
console.time("Set检查重复");
36
checkDuplicatesSet(testArray);
37
console.timeEnd("Set检查重复"); // 快

7. WeakSet#

7.1 与 Set 的区别#

1
// Set 可以存储任何类型的值
2
const set = new Set();
3
let obj = { name: "John" };
4
set.add(obj);
5
console.log(set.size); // 1
6

7
// WeakSet 只能存储对象引用
8
const weakSet = new WeakSet();
9
weakSet.add(obj); // OK
10
// weakSet.add(1); // TypeError: Invalid value used in weak set
11

12
// WeakSet 的引用是弱引用，不会阻止垃圾回收
13
obj = null; // 清除引用
14
// 等待垃圾回收后，weakSet 中的对应项会自动被移除

7.2 WeakSet 的方法#

1
const weakSet = new WeakSet();
2
const obj1 = {};
3
const obj2 = {};
4

5
weakSet.add(obj1);
6
weakSet.add(obj2);
7

8
console.log(weakSet.has(obj1)); // true
9
weakSet.delete(obj1);
10
console.log(weakSet.has(obj1)); // false
11

12
// WeakSet 没有 size 属性，不能遍历
13
// console.log(weakSet.size); // undefined
14
// weakSet.forEach(...) // 没有 forEach 方法

7.3 WeakSet 的应用场景#

1
// 1. 存储 DOM 节点，避免内存泄漏
2
const weakSet = new WeakSet();
3

4
document.querySelectorAll("button").forEach((button) => {
5
  weakSet.add(button);
6
  button.addEventListener("click", () => {
7
    if (weakSet.has(button)) {
8
      console.log("按钮在集合中");
9
    }
10
  });
11
});
12

13
// 当按钮从 DOM 中移除时，会被自动垃圾回收
14
// weakSet 中的引用也会自动移除
15

16
// 2. 私有属性模拟
17
const privateData = new WeakSet();
18

19
class User {
20
  constructor(name) {
21
    this.name = name;
22
    privateData.add(this); // 标记为"初始化"
23
  }
24

25
  isInitialized() {
26
    return privateData.has(this);
27
  }
28
}
29

30
const user = new User("Alice");
31
console.log(user.isInitialized()); // true

8. 常见的一些陷阱和注意事项#

8.1 NaN 的处理#

1
const set = new Set();
2
set.add(NaN);
3
console.log(set.has(NaN)); // true
4

5
// 注意：NaN === NaN 为 false，但 Set 认为 NaN 等于自身

8.2 对象引用#

1
const set = new Set();
2
const obj1 = { id: 1 };
3
const obj2 = { id: 1 };
4

5
set.add(obj1);
6
set.add(obj2);
7

8
console.log(set.size); // 2，因为 obj1 和 obj2 是不同的对象引用
9
console.log(set.has({ id: 1 })); // false，新对象不是同一个引用

8.3 类型转换#

1
const set = new Set();
2
set.add(1);
3
set.add("1");
4

5
console.log(set.size); // 2，1 和 '1' 类型不同，不会去重
6
console.log(set.has(1)); // true
7
console.log(set.has("1")); // true

8.4 遍历时修改#

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

3
// 在遍历时删除元素
4
for (let item of set) {
5
  if (item === 2) {
6
    set.delete(item); // 当前正在遍历的元素可以安全删除
7
  }
8
  console.log(item); // 1, 2, 3（会正常遍历完）
9
}
10

11
// 在遍历时添加元素可能有问题
12
for (let item of set) {
13
  if (item === 1) {
14
    set.add(4); // 添加的元素在本次遍历中可能不会被访问
15
  }
16
}

9. 与其它数据结构的转换#

9.1 Set 与 Array#

1
// Set → Array
2
const set = new Set([1, 2, 3]);
3
const arr1 = Array.from(set);
4
const arr2 = [...set];
5
console.log(arr1, arr2); // [1, 2, 3]
6

7
// Array → Set
8
const array = [1, 2, 2, 3, 3, 3];
9
const newSet = new Set(array);
10
console.log([...newSet]); // [1, 2, 3]

9.2 Set 与 String#

1
// 字符串去重并排序
2
const str = "javascript";
3
const uniqueSorted = [...new Set(str)].sort().join("");
4
console.log(uniqueSorted); // 'aijprstv'

9.3 Set 与 Map#

1
// 使用 Set 存储 Map 的键
2
const map = new Map([
3
  ["a", 1],
4
  ["b", 2],
5
  ["c", 3],
6
]);
7

8
const keysSet = new Set(map.keys());
9
console.log([...keysSet]); // ['a', 'b', 'c']

10. 综合示例#

1
// 实现一个简单的权限系统
2
class PermissionSystem {
3
  constructor() {
4
    this.permissions = new Set();
5
  }
6

7
  // 添加权限
8
  addPermission(permission) {
9
    this.permissions.add(permission);
10
    return this;
11
  }
12

13
  // 批量添加权限
14
  addPermissions(permissionsArray) {
15
    permissionsArray.forEach((p) => this.permissions.add(p));
16
    return this;
17
  }
18

19
  // 检查是否有某个权限
20
  hasPermission(permission) {
21
    return this.permissions.has(permission);
22
  }
23

24
  // 检查是否有所有指定权限
25
  hasAllPermissions(requiredPermissions) {
26
    return requiredPermissions.every((p) => this.permissions.has(p));
27
  }
28

29
  // 检查是否有任一指定权限
30
  hasAnyPermission(permissions) {
31
    return permissions.some((p) => this.permissions.has(p));
32
  }
33

34
  // 获取所有权限
35
  getAllPermissions() {
36
    return [...this.permissions];
37
  }
38

39
  // 移除权限
40
  removePermission(permission) {
41
    this.permissions.delete(permission);
42
    return this;
43
  }
44

45
  // 清空所有权限
46
  clearPermissions() {
47
    this.permissions.clear();
48
    return this;
49
  }
50
}
51

52
// 使用示例
53
const userPermissions = new PermissionSystem();
54
userPermissions
55
  .addPermissions(["read", "write", "delete"])
56
  .addPermission("execute");
57

58
console.log(userPermissions.hasPermission("write")); // true
59
console.log(userPermissions.hasAllPermissions(["read", "write"])); // true
60
console.log(userPermissions.getAllPermissions()); // ['read', 'write', 'delete', 'execute']

总之

高效查找：has()方法的时间复杂度是 O(1)
遍历时按插入顺序输出
需要去重时，优先考虑 Set
需要快速查找元素是否存在时，用 Set 代替数组
存储唯一值集合时，Set 是最佳选择
需要存储对象引用并自动清理时，考虑 WeakSet

音乐

音乐

JavaScript Set 方法详解#

1. Set 是什么？#

2. Set 的基本方法#

2.1 添加元素：`add()`#

2.2 删除元素：`delete()`#

2.3 检查存在：`has()`#

2.4 清空 Set：`clear()`#

3. Set 的遍历方法#

3.1 `forEach()`#

3.2 `keys()`、`values()`、`entries()`#

4. Set 的特性#

4.1 唯一性#

4.2 与数组的对比#

4.3 迭代顺序#

5. 实际应用场景#

5.1 数组去重（最常用）#

5.2 求交集、并集、差集#

5.3 数据筛选#

5.4 标签/分类系统#

6. Set 性能优势#

7. WeakSet#

7.1 与 Set 的区别#

7.2 WeakSet 的方法#

7.3 WeakSet 的应用场景#

8. 常见的一些陷阱和注意事项#

8.1 NaN 的处理#

8.2 对象引用#

8.3 类型转换#

8.4 遍历时修改#

9. 与其它数据结构的转换#

9.1 Set 与 Array#

9.2 Set 与 String#

9.3 Set 与 Map#

10. 综合示例#

分享到社交平台

评论

音乐

目录

音乐

音乐

2025-12-25-ES6-关于JavaScript的Set 方法

JavaScript Set 方法详解#

1. Set 是什么？#

2. Set 的基本方法#

2.1 添加元素：add()#

2.2 删除元素：delete()#

2.3 检查存在：has()#

2.4 清空 Set：clear()#

3. Set 的遍历方法#

3.1 forEach()#

3.2 keys()、values()、entries()#

4. Set 的特性#

4.1 唯一性#

4.2 与数组的对比#

4.3 迭代顺序#

5. 实际应用场景#

5.1 数组去重（最常用）#

5.2 求交集、并集、差集#

5.3 数据筛选#

5.4 标签/分类系统#

6. Set 性能优势#

7. WeakSet#

7.1 与 Set 的区别#

7.2 WeakSet 的方法#

7.3 WeakSet 的应用场景#

8. 常见的一些陷阱和注意事项#

8.1 NaN 的处理#

8.2 对象引用#

8.3 类型转换#

8.4 遍历时修改#

9. 与其它数据结构的转换#

9.1 Set 与 Array#

9.2 Set 与 String#

9.3 Set 与 Map#

10. 综合示例#

分享到社交平台

评论

音乐

目录

2.1 添加元素：`add()`#

2.2 删除元素：`delete()`#

2.3 检查存在：`has()`#

2.4 清空 Set：`clear()`#

3.1 `forEach()`#

3.2 `keys()`、`values()`、`entries()`#