JavaScript数组去重的五种常用实现方式

在Web开发实践中，经常需要处理包含重复元素的数组，将其转换为仅含唯一值的结构。本文将整理并分享几种常见的去重实现思路。

基于indexOf()函数的去重

以下是几种典型的数组去重实现方案：

第一种方法：基于indexOf()函数的去重

核心逻辑是初始化一个空数组，遍历原始数组中的每个元素。利用新数组的indexOf方法检查当前元素是否已存在，若返回-1（即未找到），则通过push方法将其加入新数组。遍历结束后，返回这个去重后的新数组。

若对逻辑描述感到抽象，参考下方代码示例可更直观地理解实现过程。

function fun(arr){
 let newsArr = [];
 for (let i = 0; i < arr.length; i++) {
  if(newsArr.indexOf(arr[i]) === -1){
   newsArr.push(arr[i]);
  }
 }
 return newsArr;
}

基于splice()函数的去重

第二种方法：基于splice()函数的去重

该方法的思路类似于冒泡排序，采用双层循环结构。外层循环负责遍历数组元素，内层循环从当前元素的下一个位置开始比较。一旦发现重复值，立即使用splice方法将其从原数组中移除，并调整内层循环索引以补偿因删除元素导致的下标变化，最终返回处理后的原数组。

同样，结合具体代码示例能更清晰地展示这一过程。

function fun(arr){
 for (let i = 0; i < arr.length; i++) {
  for(let j = i+1; j < arr.length; j++){
   if(arr[i]==arr[j]){
    arr.splice(j,1);　　　　　　　　　　j--;
   }
  }
 }
 return arr;
}

基于ES6 Set集合的去重方案

第三种方法：利用ES6新增的Set数据结构

简要介绍Set集合，它与数组相似但本质不同，属于集合类型。Set提供了丰富的操作方法，例如使用add添加元素、delete删除元素、has查询元素是否存在等。

Set最显著的特性是内部存储的元素具有唯一性，即自动忽略重复值，确保集合中不会出现相同的元素。

基于Set的去重方案一：手动遍历转换

鉴于Set不允许存储重复值，我们可以直接将原始数组传入Set构造函数进行去重。

具体步骤为：首先通过new Set()将原数组转换为Set对象，接着创建一个空数组，遍历该Set集合中的每个元素，使用push方法逐个添加到新数组中，最后返回这个新数组。

function fun(arr){
 let s1 = new Set(arr);
 let arr2 = [];
 for(let item of s1){
  arr2.push(item);
 }
 return arr2;
}

基于Set的去重方案二：结合Array.from()方法

思路在于利用Array.from()函数，该函数能够将类数组对象或可迭代对象（如Set）转换为真正的数组。将Set与Array.from配合使用，即可简洁地实现去重并转换类型的需求。

function fun(arr){
 let s1 = new Set(arr); 
 return Array.from(s1);
}

基于Set的去重方案三：结合ES6展开运算符

思路是利用ES6的展开运算符（...），它可以将一个数组或可迭代对象展开为由逗号分隔的参数序列。将展开运算符作用于Set对象，即可直接生成去重后的数组。

function fun(arr){
 let s1 = new Set(arr); 
 return [...s1];
}

以上即为JavaScript中几种常见的数组去重方法详解，更多关于JS数组处理的技巧，请参阅本站其他相关文章。