JavaScript中，数组去重二三事

前言

前端开发过程中，除了完成万恶的产品经理的要求以外，维护也是日常的工作。最近在重构一个旧产品的代码，emmm可读性惨不可睹，一堆乱七八糟的命名就算了，还遇到一个对数组去重的代码，自己也额外找了其他去重的方法，整理了出来总结一下

原始的去重

function uniqArr (array) {
  var temp = []
  var index = []
  var l = array.length
  for (var i = 0; i < l; i++) {
    for (var j = i + 1; j < l; j++) {
      if (array[i] === array[j]) {
        i++
        j = i
      }
      temp.push(array[i])
      index.push(i)
    }
    return temp
  }
}

这是旧代码里面的数组去重，emmm你要说可读性的话我个人肯定打零分的，这个函数除了名字有可读性外，其他地方一眼就看不出来在干嘛，中间变量居多，而且还两个for嵌套循环，不过真要说它有什么优点的话，他的兼容性和性能相比其他应该是最好的，而且如果你有数组对象去重的话，这个方法也是可以的。非常原始的一种去重，并没有使用任何封装的方法。

改良版

function uniqArr (array) {
  let data = []
  array.forEach(function（value）{
    if (!data.includes(value)) {
      data.push(value)
    }
  })
  return data
}

这是使用了ES6的数组includes方法改良的数组去重，相比原始版本，可读性，简洁性都提高了很多，思路也更清晰。相比第一种手动去判断数组，直接使用JavaScript提供的方法判断，遍历一次，如果没有该数据则push进去，中间量也减少到一个，你也可以直接使用数组的indexof方法，都是一样的效果。

数组去重骚操作

用来用去，多多少少都是比较繁琐建立函数的形式去重，如果可以直接一行代码搞定岂不是很酷？还真有

let data = [...new Set([1, 1, 2, 2, 3, 3, 4, 4, 5, 5])] // [1,2,3,4,5]

使用这个方法的话，你需要先熟悉一下Set，Set是ES6新提供的数据结构 。它类似于数组，不过它的成员都是唯一的，没有重复值。
Set函数他可以接受一个数组，（或者是具有iterable接口的其他数据结构，讲通俗点，就是他可以接受一个可以遍历的数据类型，）作为参数，用来初始化，最后使用扩展运算符展开进数组。
所以，如果举一反三的话，Set也可以用来去除字符串里面重复字符

let test = [...new Set('aaabbbccc')].join('') // 'abc'

要是如果对Set对象感兴趣，可以看阮一峰老师的ES6教程

Array.from方法结合Set 结构去重

ES6 Array数组提供了from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 Set ），这也意味着，数组去重又可以结合数组的方法和Set对象结合完成

let data = Array.from(new Set([1, 1, 1, 2, 2, 2, 3, 3, 3, 3]))
// [1,2,3]

Array.from方法还可以接受其他参数完成更加丰富的功能，这里只是简单分享一下基本的用法。感兴趣的可去查询ES6

结语

前端开发中，提升都是在每个小片段的技术中，一个小小的数组去重还牵出蛮多的知识点，有没有长见识呢？有时候多想想为什么会带给你更多的收获😄