js数组去重解决方案

js数组去重是前端面试中经常被问的题目，考察了面试者对js的掌握，解决问题的思路，以及是否具有专研精神。曾经一位前端界大神告诉我，解决问题的方式有很多种，解决问题时多问问自己还有没有其他的方法，探求最优解决方案才能学到更多。

如果，这篇文章有幸被您阅读，文中出现的错误，或者您有其他的解决方案请在评论区告诉我，谢谢。

---

方案一

 /**
   * 1.构建一个新数组
   * 2.遍历目标数组，依次取出每一个元素
   * 3.将取出的元素与新数组里面的所有元素进行比较，
   *    如果没有出现 -> 该元素添加到新数组中，
   *    如果出现  -> 处理下一个目标数组元素
   * */
  function distinct(arr) {
    console.time();    //跟踪方法的占用时长
    var result = [];    // 构建结果数组result
    for (var i = 0, len = arr.length; i < len; i++) {
      for (var j = 0, rlen = result.length; j <= rlen; j++) {
        if (arr[i] === result[j]) {
          break;
        }
        if (j == result.length) {
          result.push(arr[i]);
        }
      }
    }
    console.timeEnd();
    return result;
  }

方案优点：

• 结果数组与目标数组的顺序保持一致
• 思路简单，兼容性好

方案缺点：

• 速度慢

---

方案二

/**
   *1.目标数组排序
   *2.遍历目标数组，检测数组中的第i 个元素与结果数组中最后一个元素是否相同，如果不同，则将该元素添加到结果数组中
   * */
  function distinct(arr) {
    console.time();
    var result = [];
    arr = arr.sort();
    for (var i = 0, len = arr.length; i < len; i++) {
      if (arr[i] !== result[result.length - 1]) {
        result.push(arr[i])
      }
    }
    console.timeEnd();
    return result;
  }

方案优点：

• 方案中先排序，后遍历，速度比方法一快

方案缺点：

• 方案中使用了数组排序sort,打乱了原有顺序

Tips:数组排序

js中提供了数组排序方法sort，使用时需要注意以下几点：

1. 调用sort方法时改变了目标数组本身，非生成新数组
2. sort方法默认按照字符顺序进行排序，不过提供了回调方法，可以自定义排序规则

现有一数组arr：1,11,23,56,3,4,5,7,562,67

按字符排序

arr.sort() // 1, 11, 23, 3, 4, 5, 56, 562, 67, 7

按数字大小：正序

arr.sort((a,b) => a-b) // 1, 3, 4, 5, 7, 11, 23, 56, 67, 562

按数字大小：倒序

arr.sort((a,b) => b-a) // 562, 67, 56, 23, 11, 7, 5, 4, 3, 1

---

方案三

/**
   * 利用ES6的 数据结构SET的无重复值特性
   * Array.from 将类数组转换成数组
   * */
  function distinct3(arr) {
    console.time();
    var result = Array.from(new Set(arr));
    console.timeEnd();
    return result;
  }

方案优点：

• 代码简洁，执行速度快

方案缺点：

• ES6语法，使用时需要考虑兼容性问题

---

方案四

 /**
   * 利用对象属性无重复的特点
   * 遍历目标数组，将值设置为对象属性
   * Object.keys 将对象的所有属性提取成一个数组
   * */
  function distinct(arr) {
    console.time();
    var result = {};
    for (var i = 0, len = arr.length; i < len; i++) {
      result[arr[i]] = '';
    }
    result = Object.keys(result);
    console.timeEnd();
    return result;
  }

方案优点：

• 速度快

方案缺点：

• 1 与 '1' 无法区分
• 结果数组中的值全部为字符串
• 占内存，相当于利用空间换时间

---

方案五

/**
   * Array.filter 数组过滤函数，只保留符合条件的值
   * indexOf 查找元素第一次出现的位置，所有第1次之后查找的元素位置都不符合条件
   * */
  function distinct(arr) {
    console.time();
    var result = arr.filter(function (elem, index, self) {
      return self.indexOf(elem) === index;
    });
    console.timeEnd();
    return result;
  }

---

测试

随机生成包含10000个数字的数组

function random() {
    var a = [];
    for (var i = 0; i < 10000; i++) {
      a.push(Math.ceil(i * Math.random()))
    }
    return a;
  }

现在执行上述去重方法，取5次测试结果的平均值：

	方法一	方法二	方法三	方法四	方法五
第一次	91.281	7.921	4.36	2.038	68.856
第二次	104.492	7.519	2.267	1.328	70.555
第三次	105.937	8.874	1.804	1.680	73.020
第四次	100.524	5.287	2.602	1.573	85.129
第五次	106.612	8.990	1.615	1.963	79.115
平均	101.769	7.718	2.529	1.716	75.335

从执行速度来看，方法四 < 方法三 < 方法二 < 方法五 < 方法一

方法四最快，方法一最慢。但是五种方法各有优缺点，使用时要根据实际情况选择适合的方案。

---

写在最后

本篇文章旨在学习分享和记录，并不是说数组去重只有这五种方法，如果文章中出现了错误，或者您有更好的解决方案，麻烦您在评论区告知我，谢谢。