数组去重是JavaScript中的一个常见的操作，随着ES6的普及，越来越多的前端开发者抛弃了传统的Array去重方法，转而使用Set来完成这项任务。这种转变不仅仅是因为代码更简洁，更重要的是性能上的巨大差异。
Set去重的简洁写法
在ES6出现之前，数组去重通常需要编写循环和条件判断：
function uniqueArray(arr) {
const result = [];
for (let i = 0; i < arr.length; i++) {
if (result.indexOf(arr[i]) === -1) {
result.push(arr[i]);
}
}
return result;
}
// 使用
const array = [1, 2, 3, 3, 4, 4, 5];
const unique = uniqueArray(array); // [1, 2, 3, 4, 5]
而使用Set，代码可以简化为：
但代码简洁只是表面优势，真正的价值在于性能提升。
性能对比：数字以为自己听错了
让我们通过几种常见的去重方法进行性能对比：
- Set方法
- 传统的indexOf方法
- 使用对象（Object）作为哈希表
- 使用Array.includes方法
- 使用filter + indexOf
测试方法
我们将创建不同大小的数组进行测试，每个数组包含随机生成的数字，并确保约有30%的元素是重复的：
测试结果
以下是在不同大小数组上各方法的执行时间（单位：毫秒）：
| 方法 | 100元素 | 10,000元素 | 1,000,000元素 |
|---|---|---|---|
| Set | 0.05 | 1.2 | 85 |
| Object哈希表 | 0.08 | 2.8 | 120 |
| indexOf | 0.2 | 350 | 超过30秒 |
| includes | 0.2 | 380 | 超过30秒 |
| filter+indexOf | 0.3 | 800 | 超过60秒 |
在百万级数据上，Set比传统indexOf方法快了约300倍以上。
为什么Set如此高效？
Set之所以能提供如此惊人的性能优势，主要有以下几个原因：
1. 数据结构的本质区别
Set是基于哈希表实现的，这意味着：
- 查找、添加和删除操作的时间复杂度为O(1)
- 每个值在底层都有唯一的”地址”，可以直接访问
而Array的indexOf和includes方法需要线性搜索，时间复杂度为O(n)。
2. 引擎优化
JavaScript引擎对Set进行了特殊优化：
- V8引擎中，Set使用哈希表和红黑树的组合实现
- Set在内存中的布局更适合现代CPU的缓存机制
- 引擎可以对Set操作应用更多底层优化
3. 自动处理边缘情况
Set能正确处理JavaScript中的特殊值：
注意Set正确地将 NaN 与 NaN 视为相同（尽管 NaN !== NaN ），并且区分了 0 和 "0" 。
什么时候不应该使用Set？
尽管Set有许多优势，但也不是所有场景都适合：
- 需要保持原始顺序：虽然现代浏览器中Set是有序的（按插入顺序），但这并不是规范保证的
- 需要索引访问：Set不支持索引访问（如
set[0]） - 需要频繁修改：如果需要频繁修改集合中的元素，数组的API可能更方便
- 处理非原始类型：对于对象等非原始类型，Set使用引用相等，可能不符合预期
最佳实践：Set和Array结合使用
现代前端开发中，一个常见的模式是Set和Array结合使用：
// 数据处理流程
constprocessData = (dataArray) => {
// 1. 去重
const uniqueData = [...newSet(dataArray)];
// 2. 使用数组方法进行处理
return uniqueData
.filter(item => item > 10)
.map(item => item * 2)
.sort((a, b) => a - b);
};
这种模式结合了Set的高效去重能力和Array丰富的数据处理方法。