前言本文属于个人闲来无事写写记录一下看到有大量地方都有使用循环结合自己在数据处理时也常常使用大量循环去过滤匹配构造查看等操作去处理数据。在相同的数据处理场景下不同的伙伴却使用了不同的循环而且都能满足预期的结果那哪个在同等的应用场景下使用场景比较优勒。带着疑问看一下内容希望对往后的开发有所帮助。使用原生 JavaScript 方法1、filter()方法配合indexOf()constuniqueArrayarray.filter((item,index,self){returnself.indexOf(item)index;});该方法利用filter()遍历数组对于每个元素通过indexOf()查找其在原数组中的第一个索引。如果当前元素的索引与正在遍历的索引相同说明这是该元素在数组中的首次出现保留该元素否则忽略该元素。2、reduce()方法配合include()constuniqueArrayarray.reduce((acc,current){returnacc.includes(current)?acc:[...acc,current];},[]);这里使用reduce()函数将数组累积到一个新的数组acc中。在每次迭代中检查当前元素是否已存在于累积数组中。若不存在则将其添加至累积数组否则跳过该元素。利用 ES6 新特性1、 使用扩展运算符与解构赋值constuniqueArray[...newSet(array)];这种方法简洁高效利用 ES6 的Set数据结构自动去除重复元素的特性再通过扩展运算符将Set转换回数组。Set是一种特殊的集合不允许重复元素存在因此插入过程会自动过滤重复项。2、利用 Map 数据结构constuniqueArrayArray.from(newMap(array.map(item[item,item])).values());尽管不如直接使用Set直观但此方法同样有效。它首先将数组映射为键值对相同的Map由于Map键的唯一性重复的数组元素会被自动忽略。然后通过Array.from()和Map.values()将Map的值即无重复元素转换回数组。双重循环与哈希表1、双重循环constuniqueArray[];for(leti0;iarray.length;i){letisDuplicatefalse;for(letj0;ji;j){if(array[i]array[j]){isDuplicatetrue;break;}}if(!isDuplicate){uniqueArray.push(array[i]);}}这种方法最直观也最基础通过外层循环遍历数组内层循环检查当前元素是否与之前的所有元素重复。如果没有重复则将其添加到结果数组中。虽然理解简单但时间复杂度较高不适用于大型数据集。2、利用对象作为哈希表constuniqueArray[];consthashTable{};for(leti0;iarray.length;i){constitemarray[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 进行多线程处理避免阻塞主线程影响用户体验。