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

function uniqueArray(arr) {
  return [...new Set(arr)];
}

// 使用
const array = [1, 2, 3, 3, 4, 4, 5];
const unique = uniqueArray(array); // [1, 2, 3, 4, 5]

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

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

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

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

测试方法

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

function generateTestArray(size) {
  const array = [];
  for (let i = 0; i < size; i++) {
    // 生成一定比例的重复元素
    if (Math.random() > 0.7 && array.length > 0) {
      // 从现有数组中随机选择一个元素作为重复元素
      array.push(array[Math.floor(Math.random() * array.length)]);
    } else {
      // 生成一个新的随机元素
      array.push(Math.floor(Math.random() * size * 10));
    }
  }
  return array;
}

// 生成测试数组
const small = generateTestArray(100); // 100 个元素
const medium = generateTestArray(10000); // 10,000 个元素
const large = generateTestArray(1000000); // 1,000,000 个元素

console.log("Small:", small);
console.log("Medium:", medium);
console.log("Large:", large);

测试结果

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

在百万级数据上，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中的特殊值：

const weirdArray = [0, -0, NaN, NaN, undefined, null, false, 0, ""];
console.log([...new Set(weirdArray)]); 
// 输出：[0, NaN, undefined, null, false, ""

注意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);
};