js数组去重超详细解释（小白专用）

js数组去重是面试常问的东西，但是很多人一直搞不明白，所以自己以小白的身份写一篇详细到不能再详细的文章以帮助小白。

一、利用数组的splice()方法去重
1.首先先明白splice()操作方法是干什么的
（1）删除，需要指定两个参数：要删除的第一项位置和要删除的项数

var arr=[1,2,3,4,5,6];
var result=arr.splice(0,2);
console.log(result);//[1,2]
console.log(arr);//[3,4,5,6]

(2)插入,可以向指定位置插入任意数量的项，指定三个参数：
起始位置、要删除的项（插入的话一般为0）和要插入的项

var arr = [1, 2, 3, 4, 5, 6];
var res = arr.splice(1, 0, 7, 8);
console.log(res);//返回一个空数组
console.log(arr);//[1,7,8,2,3,4,5,6]
//从第一个位置之后插入了7，8两个数

（3）替换，可以向指定位置插入任意数量的项，且同时删除任意数量的项，指定三个参数：
起始位置、要删除的项数和要插入的任意数量的项

var arr = [1, 2, 3, 4, 5, 6];
var res = arr.splice(0, 1, 7);//从0位置开始，删除1项，然后再加7
console.log(res);//[0]被删除的项
console.log(arr);//[7,2,3,4,5,6]
//替换和插入一样的道理，只是第二个参数是否要删除不一样

知道了splice的用法我们可以开始第一种去重方法了
举个例子：
双重循环取出i和j=i+1(若i=0,numbers[0]=1,j循环到6,numbers[6]=1,如果两个相等)那么从j项（j=6），即第七项开始，删除一项（即1），此刻
numbers=[1,3,5,3,7,9,5,5,9]

var numbers = [1,3,5,3,7,9,1,5,5,9]
for (var i = 0; i < numbers.length; i++) {
    for (var j = i + 1; j < numbers.length; j++) {
         if (numbers[i] == numbers[j]) {
               numbers.splice(j, 1);
  //j--这里要注意，因为假如删除了一项，后面的项就会顶上来，所以要j--把顶上来的项也对比一下，以防相邻两项是一样的话就会对比漏了             
               j--;
           }
        }
   }
console.log(numbers);

二、和第一种类似都是双重for循环，只是技巧不一样，直接看代码

var numbers = [1,3,5,3,7,9,1,5,5,9]
var res = [];
for (var i = 0; i < numbers.length; i++) {
   for (var j = i + 1; j < numbers.length; j++) {
      if (numbers[i] == numbers[j]) {
           i++; //
         }
     }
     res.push(numbers[i]);
  }
 console.log(res);

三、forEach方法与indexOf 去重
1.forEach方法运用

var numbers = [1,3,5,3,7,9,1,5,5,9]
//item是每个数组元素，index是索引号,array是数组本身
numbers.forEach(function(item,index,array){
	console.log(item);//循环遍历出每一个数组元素
})

2.indexOf方法和lastIndexOf方法
两个方法都是接收两个参数：要查找的项和查找起点位置的索引（可选）
如何在数组中没有找到则返回-1

var numbers = [1,3,5,3,7,9,1,5,5,9];
console.log(numbers.indexOf(5));//2
console.log(numbers.lastIndexOf(5));//1 和indexOf区别是反向查找
console.log(numbers.indexOf(555));//-1 如何在数组中没有找到则返回-1

明白了两个方法怎么用我们就可以来数组去重了,原理也很简单，遍历出每个元素，看result数组中是否存在这个元素，如果是-1则表示没有相同元素，然后push到result中。

var numbers = [1,3,5,3,7,9,1,5,5,9];
var result = [];
numbers.forEach(item => {
   	if (result.indexOf(item) == -1) { //-1表示不存在
      result.push(item);
     }
})
console.log(result)

四、利用filter()函数去重
1.filter（）函数可以理解为一个筛选方法，筛选出自己想要的数组,这里方便区别各类方法，大概列举一下几个迭代方法放在一起，方便大家记忆
数组中有5个迭代方法分别是：
every(),some(),fifter(),map(),forEach(),在写法上上类似的，都是一个回调函数里面要传三个参数，三个参数的意思也是一样的，只是功能上的区别

var numbers = [1,3,5,3,7,9,1,5,5,9];
var res = numbers.filter(function(item, index, array) {
      return (item > 5);//返回大于5的数组元素
    });
console.log(res)//[7,9,9]

利用fifter（）的功能配合indexOf即可完成去重

var numbers = [1,3,5,3,7,9,1,5,5,9];
var result = numbers.filter((item, index) => {
//刷选的条件是numbers数组元素位置与索引号完全相同的元素
//例如第一个元素,indexOf(1)返回0 与index完全相同，所以满足的元素就会被返回。
 return numbers.indexOf(item) === index;
  })
console.log(result);

五、reduce()归并方法去重
reduce()这个方法接收两个参数：一个回调函数和（可选）作为累加的基础值。
与其相反的一个函数是reduceRight()，它的顺序是从数组的右边到左边

var numbers = [1,3,5,3,7,9,1,5,5,9];
var result = numbers.reduce((pre, item) => {
//pre相当于一个接收累加的变量，item就是数组的每个元素
//例如：pre初始为0，item为1，返回值为1
     // pre初始为1，item为3，返回值为4
    console.log(pre, item);
    return pre + item;
        }, 0);
 console.log(result);

下面我们利用这个函数结合三元运算来去重

var numbers = [1,3,5,3,7,9,1,5,5,9];
var result=numbers.reduce((pre,item)=>{
//pre中是否有item
		return pre.includes(item)?pre:[...pre,item]
},[])

六、利用对象key值唯一性来去重

var obj={
	a:1,
	b:2,
	a:4
}//这个对象的a只能有一个，结果是4，对象会把重复的key值自动删除

利用这个特性，我们可以把数组里面的每个元素当成一个对象里的key值，这样就可以中把重复的key值去除了

var numbers = [1,3,5,3,7,9,1,5,5,9];
var obj = {};
numbers.forEach((item, index) => {
//给obj对象赋值，例如obj[1]=111,值可以随便
    obj[numbers[index]] = 111
}) 
//这里通过Object.keys()可以取出对象的key值, Object.keys()的作用是返回一个由属性名组成的数组，其实和for ..in类似,但取出的值是字符串类型的，所以可以通过一些简单的技巧转换成数字类型,也可以用parseInt等字符串转换数字的方法
var result = Object.keys(obj).map(item => ~~item)
console.log(result);

七、利用sort()排序，相邻元素对比是否相同来去重
首先先看下sort()方法的运用

var numbers = [1,3,5,3,7,9,1,5,5,9];
numbers.sort();//[1,1,3,3,5,5,5,7,9,9]
//sort()可以按照数字首个字母来进行排序
//我们也可以在sort里传入比较大小进行排序的函数，这样就可以让sort有升序和降序的功能，这里就不在去写了

var numbers = [1, 3, 5, 3, 7, 9, 1, 5, 5, 9];
var res = [];
var temp = numbers.sort();
console.log(temp);//[1,1,3,3,5,5,5,7,9,9]
temp.forEach((item, index) => {
     if (temp[index] !== numbers[index + 1]) {
     //相邻两个元素两两比较，如果不等，可以把前一个元素放入res
         res.push(temp[index]);
     }
})
console.log(res);

八、利用ES6 set来去重
es6新增来一个set数据结构，类似于数组，它有个特性就说数组里的值是唯一的，就像对象里的key一样是唯一的，利用这个特性就可以很快去除重复值

var numbers = [1, 3, 5, 3, 7, 9, 1, 5, 5, 9];
const s1 = new Set(numbers);
const ary = [...s1];//这里注意，因为Set的结果是伪数组，我们可以用[...s1]这种方式转换成真数组
//还有一种方法是Array.from可以把伪数组转换成真数组，这里做个提示。
console.log(ary);

以上是常用的数组去重方法，方法还有很多，先占个坑位，后面会继续补上