数组去重那些事（如何进行数组的去重）

数组去重

最近在学习时，偶然看到一篇前端大牛的关于数组去重的文章，吸收消化后作为自己的学习笔记记录

常规方法（双层循环）

先上代码：

function unique(a){
			var res =[];
			for(var i=0,len=a.length;i<len;i++){
				var item =a[i];
				//console.log(item);
				console.log(res.length);
			for(var j=0,JLen=res.length;j<JLen;j++){
				if(res[j]===item)
				break;
			}	
			if(j===JLen)
			res.push(item)
			}
			return res;
		}

使用双层循环，定义一个变量数组res保存结果，遍历需要去重的数组，本实例为a数组，如果遍历出的元素已经在res中，则说明这个元素是重复的元素，如果res中没有则放入res中。
这种常规的方法使用了双重循环，以下介绍优化后的方法

优化一 单层循环（内循环省略）

同样先上代码：

function unique2(arr){
	if(arr&&arr.length===1){
		return arr;
	}
	var res=[];
	for(var i=0,len=arr.length;i<len;i++){
		var item=arr[i];
		if(res.indexOf(item)===-1){
			res.push(item);
			}
		//这里的if判断可以用短路与运算一样的效果，走到这判断是否为-1不成功则后面的不运算，成功则后面的代码也执行
		//res.indexOf(item)===-1&&res.push(item);
	}
		return res;
	}

采用数组原生的方法indexOf替代内部循环
int indexOf(String str): 返回指定字符在字符串中第一次出现处的索引，如果此字符串中没有这样的字符，则返回 -1。
也就是res调用indexOf方法判断item是否在res中存在，不存在返回-1后把itempush进res

优化二（用ES5中数组自带的forEach代替循环）

function unique3(array){
		if(array&&array.length<=1){
			return array;
		}
		var res=[];
		
		array.forEach(function(value,index){
			res.indexOf(value)==-1?res.push(value):'';
		})
		return res;
	}

这个方法也比较直观，数组调用forEach，参数value即当前遍历到的数据，index是索引。同样res调用indexOf方法判断value是否在res中存在，如果不存在push进res中，如果存在执行‘’即啥也不操作。

优化三（用数组的另一个方法filter代替循环）

先看看filter方法的作用

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}

按照checkAdult的规则，把数组中的数据进行过滤，大于18的数据保留。
依照这个特性，我们也可以用于数组去重中：

	function unique4(arr){
		var res=arr.filter(function(item,index,array){
			return array.indexOf(item)===index
		})
		return res;
	}

调用indexOf方法返回item第一次出现的位置，继续往下走，发现同样的元素则不会return，也就是不给其索引。比如arr是1,1,2,3,3，第一个1的索引index是0 indexOf（1）返回的是0，当前索引值为0。于是返回，继续往下indexOf（1）返回的还是0但是此时index为1不成立。所以不返回。继续走indexOf（2）返回2，当前索引值为2成立。返回给res以此类推。

优化四 不用循环

function unique5(arr){
		return arr.sort().reduce((accumulator,current)=>{
			const length = accumulator.length;
			if(length===0||accumulator[length-1]!==current){
				accumulator.push(current);
			}
			return accumulator;
		},[]);
	}

采用ES5中数组原生方法reduce来代替循环、不多赘述。

优化五(使用ES6的方法)

function unique6(arr){
		return [...new Set(arr)]
	}

Set运算能够给返回一个无重复字段的set类型

那么我么拿货的了这样一个对象。我们只要把它转换为数组即可。用ES6中…云算法将其转换为数组。
当然也可以使用Array.from来代替…

return Array.from(New Set(arr))

至此数组去重比较浅显的整理结束了。还有使用另外的方法来达到数组去重，本文介绍只是冰山一角。