JavaScript有集合吗

发布时间：2021-07-19 00:38:08 作者：chen
来源：亿速云阅读：194

# JavaScript有集合吗？

## 引言

在编程语言中，"集合"（Set）通常指一种无序且不包含重复元素的数据结构。许多传统语言如Java、Python都内置了集合类型，那么作为前端主导语言的JavaScript是否也有集合呢？答案是肯定的。ES6（ECMAScript 2015）正式引入了`Set`对象，为JavaScript开发者提供了标准的集合操作能力。本文将详细探讨JavaScript中的集合实现、特性以及实际应用场景。

---

## 一、JavaScript中的Set对象

### 1. 基本定义
`Set`是ES6新增的内置对象，用于存储任何类型的唯一值（包括原始类型和对象引用）。其核心特性包括：
- **唯一性**：自动去重，重复添加的值会被忽略
- **无序性**：元素没有索引概念，遍历顺序即插入顺序
- **动态大小**：不像数组需要预先定义长度

```javascript
const mySet = new Set();
mySet.add(1);       // Set(1) {1}
mySet.add('text');  // Set(2) {1, 'text'}
mySet.add(1);       // 重复值被忽略

2. 初始化方式

可以通过可迭代对象（如数组）初始化Set：

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

3. 类型强化的WeakSet

ES6还引入了WeakSet，专门用于存储对象引用（不接受原始值），且具有弱引用特性（不影响垃圾回收）：

const ws = new WeakSet();
ws.add({ data: 42 }); // 有效
ws.add(1);            // 报错

二、Set的核心API

1. 基础操作方法

add(value)：添加元素
delete(value)：删除元素
has(value)：检查存在性
clear()：清空集合

const set = new Set();
set.add('apple').add('banana');
console.log(set.has('apple')); // true
set.delete('banana');
console.log(set.size);        // 1

2. 遍历方法

keys()/values()：返回迭代器（Set中两者相同）
entries()：返回[key, value]迭代器
forEach(callback)：遍历元素

const colors = new Set(['red', 'green', 'blue']);
colors.forEach(color => console.log(color));

3. 大小属性

size属性返回元素数量（类似数组的length）：

new Set([1,2,3]).size; // 3

三、Set的典型应用场景

1. 数组去重

最经典的用法：

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

2. 成员关系判断

比数组的includes()更高效（O(1)时间复杂度）：

const validCodes = new Set([200, 201, 204]);
if(validCodes.has(res.status)) {...}

3. 集合运算

通过扩展运算符实现并集/交集/差集：

// 并集
const union = new Set([...setA, ...setB]);

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

// 差集
const difference = new Set([...setA].filter(x => !setB.has(x)));

4. 避免重复操作

例如记录已处理过的ID：

const processedIDs = new Set();
function process(id) {
  if(!processedIDs.has(id)) {
    // 处理逻辑...
    processedIDs.add(id);
  }
}

四、Set的性能特点

1. 查找效率

基于哈希表实现，has()操作的时间复杂度为O(1)，远优于数组的O(n)：

// 测试10,000个元素的查找速度
const bigSet = new Set([...Array(10000).keys()]);
console.time('Set查找');
bigSet.has(9999); // ~0.01ms
console.timeEnd('Set查找');

2. 内存占用

相比Object存储键值对，Set更节省内存（无需存储值）：

const obj = {a: true, b: true}; // 存储键和值
const set = new Set(['a', 'b']); // 仅存储键

3. 与Array的对比

操作	Array	Set
查找元素	O(n)	O(1)
插入元素	O(1)*	O(1)
删除元素	O(n)	O(1)
去重	需手动	自动

*注：数组push操作为O(1)，但插入到特定位置为O(n)

五、注意事项

NaN处理：Set认为NaN等于自身（与Object不同）

const set = new Set();
set.add(NaN);
set.has(NaN); // true

对象引用：不同对象被视为不同元素
```
new Set().add({}).has({}); // false
```
类型转换：不会发生隐式类型转换
```
new Set().add(5).has('5'); // false
```
顺序依赖：虽然无序，但遍历顺序与插入顺序一致

结语

JavaScript通过ES6的Set对象提供了完整的集合实现，弥补了之前版本在这方面的不足。它不仅在数据去重、高效查找等场景表现优异，其清晰的API设计也大大提升了代码可读性。结合扩展运算符和Array.from()等方法，可以轻松实现各种集合运算。对于现代JavaScript开发者来说，合理运用Set将成为提升代码质量和性能的重要手段。 “`

本文共计约1050字，详细介绍了JavaScript中Set的特性、API、应用场景及性能特点，采用Markdown格式编写，包含代码示例和对比表格，可直接用于技术文档或博客发布。