前端开发者为什么用Set代替Array去重？

数组去重是 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 uniqueWithSet(arr) {
  return[...new Set(arr)]
};
// 更简洁的写法
const unique=[...new set([1,2,3,3,4,4,5])];//[1，2，3，4，5]

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

性能对比

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

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

测试方法

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

function generateTestArray(size) {
  const array=[];
  for(leti=0;i<size; i++){
    // 生成一定比例的重复元素
    if (Math.random()>0.7) {
      array.push(array[Math.floor(Math.random()* array.length)]||0);
    } 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 个元素

测试结果

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

在百万级数据上，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,"0"];
console.log([...new Set(weirdArray)]);
//输出:[0,NaN,undefined,null,false,"0"]

注意 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 丰富的数据处理方法。

以上关于前端开发者为什么用Set代替Array去重？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。