JS数组去重方法整理，再也不用担心数组如何去重了

前端笔试的过程中，大概率会有这样一道题，给你一个字符串数组，让你输出其中不重复的字符串的个数，这就是典型的数组去重了，那应该如何进行数组去重呢？本篇文章整理了近10种方案，你来看看那个最适合。

1.利用set对数组去重

set是ES6中的一种数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。

function unique(arr) {
	return [...new Set(arr)]  // 扩展运算符，将伪数组转换为真正的数组
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

同时，也可以使用Array.from方法将类数组或可遍历对象转换为真正的数组。

function unique(arr) {
	return Array.from(new Set(arr))
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

2.双层for循环

function unique(arr) {
	var tmp = [];
	tmp[0] = arr[0];  // 声明一个中间数组，数组的第一个值和原数组的第一个值相等
	for(var i=0;i<arr.length;i++){
		for(var j=0;j<tmp.length;j++){
			if(arr[i]==tmp[j]){ break; }  // 如果两个数组中的值相等，就退出本次循环
			if(j==tmp.length-1){
				tmp.push(arr[i])  // 不相等时，push到中间数组中 
			}
		}
	}
	return tmp;
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

该方法用到了一个中间数组，下面是不需要借助中间数组的一种方式：

function unique(arr) {
	for(var i=0;i<arr.length;i++){
		for(var j=i+1;j<arr.length;j++){
			if(arr[i]==arr[j]){   // 数组当前值和之后的值进行比较，如果相等
				arr.splice(j,1) ;   // 删除索引靠后的相同值
				j--;
			}
		}
	}
	return arr;
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

3.indexOf

function unique(arr){
	var array = []
	for(var i=0;i<arr.length;i++){
		if(array.indexOf(arr[i]) === -1) {  // 证明数组中没有该值
			array.push(arr[i])
		}
	}
	return array;
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，如果要检索的字符串值没有出现，则该方法返回 -1。

4.sort

function unique(arr){
	arr = arr.sort();
	var array = [arr[0]]
	for(var i=1;i<arr.length;i++){  // 排序完成，从第二个值开始遍历
		if(arr[i] !== arr[i-1]) {   // 如果当前值不等于上一个值，就push进新数组中
			array.push(arr[i]) 
		}
	}
	return array;
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

sort()排序方法，会对数组进行排序，最终输出的数组和传入的数组，元素位置不一样

5.includes

function unique(arr){
	var array = []
	for(var i=0;i<arr.length;i++){
		if(!array.includes(arr[i])) {  // 没有包含指定值
			array.push(arr[i])
		}
	}
	return array;
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

includes() 方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。

6.reduce+includes

function unique(arr) {
	return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev,cur],[])
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

reduce()函数为归并类函数，最常见的应用场景就是，计算数组中每一项的总和。该方法会遍历数组的每一项，它接收两个参数：第一个参数是：每次遍历都会调用的函数，而这个函数又接收四个参数，分别为：前一个值、当前项、项目的索引和数组对象，而这个函数的返回值，会传给下一次遍历时，执行的这个方法的第一个参数。第二个参数是：归并基础的初始值。

上面代码中，传递了两个参数，第一个参数是(prev, cur)，第二个参数是[]，所以在第一次循环时，prev是一个空数组，cur是数组的第一项，返回的函数结果作为第二次循环时的prev值，cur变为数组的第二项，由此可以实现数组去重的效果。

7.filter

function unique(arr){
	return arr.filter(function(item, index, arr) {
		return arr.indexOf(item) === index;   // 过滤出原数组中的第一个索引等于当前索引值的元素
	})
}
var arr = ["abc","ade","bef","bef","abd","efg"];
console.log(unique(arr))

关于数组去重这块今天就分享到这里了，当然，方案不只这几个，还有好多种方案等着大家去探索呦！