前言

本文属于个人闲来无事，写写记录一下；看到有大量地方都有使用循环，结合自己在数据处理时，也常常使用大量循环去过滤，匹配，构造，查看等操作去处理数据。在相同的数据处理场景下，不同的伙伴却使用了不同的循环，而且都能满足预期的结果，那哪个在同等的应用场景下使用场景比较优勒。带着疑问看一下内容，希望对往后的开发有所帮助。

使用原生 JavaScript 方法

1、filter()方法配合indexOf()

constuniqueArray=array.filter((item,index,self)=>{returnself.indexOf(item)===index;});

该方法利用filter()遍历数组，对于每个元素，通过indexOf()查找其在原数组中的第一个索引。如果当前元素的索引与正在遍历的索引相同，说明这是该元素在数组中的首次出现，保留该元素；否则，忽略该元素。

2、reduce()方法配合include()

constuniqueArray=array.reduce((acc,current)=>{returnacc.includes(current)?acc:[...acc,current];},[]);

这里使用reduce()函数将数组累积到一个新的数组（acc）中。在每次迭代中，检查当前元素是否已存在于累积数组中。若不存在，则将其添加至累积数组；否则，跳过该元素。

利用 ES6 新特性

1、 使用扩展运算符与解构赋值

constuniqueArray=[...newSet(array)];

这种方法简洁高效，利用 ES6 的Set数据结构自动去除重复元素的特性，再通过扩展运算符将Set转换回数组。Set是一种特殊的集合，不允许重复元素存在，因此插入过程会自动过滤重复项。

2、利用 Map 数据结构

constuniqueArray=Array.from(newMap(array.map(item=>[item,item])).values());

尽管不如直接使用Set直观，但此方法同样有效。它首先将数组映射为键值对相同的Map，由于Map键的唯一性，重复的数组元素会被自动忽略。然后通过Array.from()和Map.values()将Map的值（即无重复元素）转换回数组。

双重循环与哈希表

1、双重循环

constuniqueArray=[];for(leti=0;i<array.length;i++){letisDuplicate=false;for(letj=0;j<i;j++){if(array[i]===array[j]){isDuplicate=true;break;}}if(!isDuplicate){uniqueArray.push(array[i]);}}

这种方法最直观也最基础，通过外层循环遍历数组，内层循环检查当前元素是否与之前的所有元素重复。如果没有重复，则将其添加到结果数组中。虽然理解简单，但时间复杂度较高，不适用于大型数据集。

2、利用对象作为哈希表

constuniqueArray=[];consthashTable={};for(leti=0;i<array.length;i++){constitem=array[i];if(!hashTable[item]){uniqueArray.push(item);hashTable[item]=true;}}

这种方法利用对象作为哈希表，以数组元素作为键。在遍历过程中，若元素尚未作为对象的键存在，则添加到结果数组并将其设置为哈希表的键。由于对象属性查找的时间复杂度接近 O(1)，这种方法在处理大量数据时比双重循环更为高效。

性能比较与优化策略

1、性能比较

• filter()+indexOf()：线性时间复杂度 O(n^2)，适合小型数据集。
• reduce()：线性时间复杂度 O(n^2)，适合小型数据集。
• 扩展运算符与Set：近乎线性时间复杂度 O(n)，非常高效，适合各种规模的数据集。
• Map：近乎线性时间复杂度 O(n)，非常高效，适合各种规模的数据集。
• 双重循环：平方时间复杂度 O(n^2)，效率低，仅适用于极小数据集。
• 哈希表：近乎线性时间复杂度 O(n)，高效，适合各种规模的数据集。

2. 优化策略

• 选择合适的方法：根据数据规模和项目需求，优先考虑使用Set、Map或哈希表方法，它们具有更高的时间效率。
• 预处理数据：如果可能，提前对数据进行排序或转换，简化去重逻辑，提高效率。
• 懒加载与分批处理：对于超大规模数据，可采用懒加载或分批处理策略，避免一次性加载全部数据导致的性能瓶颈。
• 使用 Web Worker：对于计算密集型的去重操作，可以考虑使用 Web Worker 进行多线程处理，避免阻塞主线程影响用户体验。