数组去重是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，代码可以简化为：

但代码简洁只是表面优势，真正的价值在于性能提升。

性能对比：数字以为自己听错了

让我们通过几种常见的去重方法进行性能对比：

1. Set方法
2. 传统的indexOf方法
3. 使用对象（Object）作为哈希表
4. 使用Array.includes方法
5. 使用filter + indexOf

测试方法

我们将创建不同大小的数组进行测试，每个数组包含随机生成的数字，并确保约有30%的元素是重复的：

测试结果

以下是在不同大小数组上各方法的执行时间（单位：毫秒）：

在百万级数据上，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有许多优势，但也不是所有场景都适合：

1. 需要保持原始顺序：虽然现代浏览器中Set是有序的（按插入顺序），但这并不是规范保证的
2. 需要索引访问：Set不支持索引访问（如set[0]）
3. 需要频繁修改：如果需要频繁修改集合中的元素，数组的API可能更方便
4. 处理非原始类型：对于对象等非原始类型，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丰富的数据处理方法。