【前端学习】—使用多种方式实现数组去重（六）

### 前端数组去重的方法 在前端开发中，JavaScript 提供了多种方式对数组进行去重。以下是几种常见且有效的实现方法： #### 方法一：使用 `Set` 对象 `Set` 是一种数据结构，能够自动移除重复项。通过将数组转换为 `Set` 后再转回数组即可完成去重。 ```javascript let arr = [1, 2, 3, 4, 4, 5, 6, 6]; arr = [...new Set(arr)]; console.log(arr); // 输出: [1, 2, 3, 4, 5, 6] ``` 此方法简洁高效，适用于大多数场景[^2]。 --- #### 方法二：利用 `filter` 和 `indexOf` 该方法的核心在于遍历数组时，仅保留首次出现的元素。 ```javascript let arr = [1, 2, 3, 4, 4, 5, 6, 6]; arr = arr.filter((item, index) => arr.indexOf(item) === index); console.log(arr); // 输出: [1, 2, 3, 4, 5, 6] ``` 这种方法逻辑清晰，适合初学者理解和使用。 --- #### 方法三：基于 `reduce` `reduce` 可以累积结果并判断当前元素是否已存在于新数组中。 ```javascript const array = [1, 2, 2, 3, 4, 4, 5]; const uniqueArray = array.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []); console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5] ``` 这种方式灵活性较高，尤其当需要额外处理时非常有用[^4]。 --- #### 方法四：传统循环检测法 这是一种基础的手动实现方式，虽然效率较低但便于理解其工作原理。 ```javascript function repeat(array){ var array1 = []; for(var i=0, leng=array.length; i<leng; i++){ if(array1.indexOf(array[i]) === -1){ array1.push(array[i]); } } return array1; } console.log(repeat([1, 2, 3, 4, 4, 5])); // 输出: [1, 2, 3, 4, 5] ``` 这种写法较为冗长，但在某些特定需求下仍可采用[^1]。 --- #### 方法五：借助 `Map` 数据结构 `Map` 的键具有唯一性特点，因此也可作为辅助工具来进行数组去重。 ```javascript const array = [1, 2, 2, 3, 4, 4, 5]; const map = new Map(); array.forEach(item => !map.has(item) && map.set(item, true)); const uniqueArray = Array.from(map.keys()); console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5] ``` 相比其他方案，`Map` 更加灵活，在复杂情况下表现更优[^4]。 --- ### 总结 以上列举了几种主流的 JavaScript 数组去重技术，每种都有各自适用范围及性能差异。实际项目中可根据具体环境和个人偏好选择合适的方式实施。