背景

在前端面试中，关于如何实现数组元素去重一直是一个高频考点，我总结整理了几种实现方案，现分享给大家。

注：本文讨论的数组去重，仅仅是针对简单类型元素，而非多维数组和对象数组。


1. 双重for循环法


最容易想到的应该就是通过for循环，遍历数组。如下列代码所示：

var arr = [ 1, 2, 2, 3, 5, 2, 3, 1 ];
var deduplicate = function(arr) {
   for (var i = 0; i 1; i++) {
       for (var j = i + 1; j            if(arr[i] === arr[j]){
               arr.splice(j, 1);
               j--;
           }
       }
   }
   return arr;
}
deduplicate(arr);// [1, 2, 3, 5]

在该代码段中，执行两层循环，以判断是否有重复值，若有，就依次删除掉末尾的值。其思想有点类似于选择排序(Selection Sort)，每执行一次外层循环，都可以过滤掉一组相同的值。


2. for + includes法


如下列代码所示：

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = function(arr) {
   const result = [];
   for (let item of arr) {
       if(!result.includes(item)) {
         result.push(item)
      }
   }
   return result;
}
deduplicate(arr);// [1, 2, 3, 5]

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = function(arr) {
   const result = [];
   for (let item of arr) {
       if(!result.includes(item)) {
         result.push(item)
      }
   }
   return result;
}
deduplicate(arr);// [1, 2, 3, 5]

在该代码段中，首先在函数内声明一个临时变量result，然后遍历目标数组，判断result中是否存在当前遍历值，如果不存在，就压入。


3. indexOf 与 lastIndexOf 比较法


代码如下所示：

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
   arr.forEach(function(item) {
       if (arr.indexOf(item) !== arr.lastIndexOf(item)) {
           arr.splice(arr.lastIndexOf(item), 1);
       };
   });
   return arr;
}

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
   arr.forEach(function(item) {
       if (arr.indexOf(item) !== arr.lastIndexOf(item)) {
           arr.splice(arr.lastIndexOf(item), 1);
       };
   });
   return arr;
}

这个方法的核心点就是判断一个值的正向序和逆向序是否相同，若不同，则说明该值重复，移除掉重复值即可。


4. filter + indexOf


代码如下所示：

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = arr => 
  arr.filter((it, ix) => arr.indexOf(it) === ix)

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = arr => 
  arr.filter((it, ix) => arr.indexOf(it) === ix)

filter方法会对源数组进行遍历，筛选出符合指定条件的数组项。


5. for + sort


代码如下所示：

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
  var sortedArr = arr.sort();
  var result = [sortedArr[0]];
  for(var i = 1; i     if(sortedArr[i] !== sortedArr[i - 1]) {
      result.push(sortedArr[i]);
    }
  }
  return result;
}

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
  var sortedArr = arr.sort();
  var result = [sortedArr[0]];
  for(var i = 1; i     if(sortedArr[i] !== sortedArr[i - 1]) {
      result.push(sortedArr[i]);
    }
  }
  return result;
}

先通过sort方法对数组进行排序，再对数组元素进行两两比较，值不同，则压入即可。


6. 转换成对象


代码如下所示：

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
  var result = {};
  arr.forEach(it => result[it] = it);
  return Object.values(result)
}

var arr = [1, 2, 2, 3, 5, 2, 3, 1];
var deduplicate = function(arr) {
  var result = {};
  arr.forEach(it => result[it] = it);
  return Object.values(result)
}



该方法利用了对象中的键不能重复的特点，将数组值作为对象属性键，再取出对象所有的值即可。


7.转换成集合


该方法是基于ES6(ES2015)提出的集合(Set)的概念。因为集合中没有重复元素，故将元素传入Set中，其会自动去重。如下所示：

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = arr => [...new Set(arr)];

const arr = [1, 2, 2, 3, 5, 2, 3, 1];
const deduplicate = arr => [...new Set(arr)];