JS数组去重

JS数组去重

最近看了下关于数组去重相关的方法，现在自己做一下总结。

情境

输入 [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘a’, ‘a’,{},{}];
输出 过滤掉数组中重复的值

ES6-set

使用ES6中的set是最简单的去重方法

var arr  = [1,1,'true','true',true,true,15,15,false,false, undefined,
undefined, null,null, NaN,NaN,'NaN', 0, 0, 'a', 'a',{},{}];

function arr_unique(arr){
	return  [...new Set(arr)];
	//或者
	//return  Array.from(new Set(arr));
}
arr_unique(arr);

//(13)[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

该方法可以说是最完美的方法，就是需要环境支持ES6

forEach + indexOf

function arr_unique2(arr){
	var res = [];
	arr.forEach((val,index)=>{
		if( res.indexOf(val) === -1 ){
			res.push(val);
		}
	});
	return res;
}
arr_unique(arr);
//(14) [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]

该方法的不足之处在于无法对NaN进行过滤，原因是var a = [1, NaN , 2]; a.indexOf(NaN) === -1;，改善的方法是使用includes方法

filter+indexOf

function arr_unique3(arr){
	return  arr.filter((val,index,item)=>{
		return item.indexOf(val) === index;
	});
}
arr_unique3(arr);
//(12) [1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

美中不足的地方在于漏掉了NaN,原因同方法二

forEach + includes

function arr_unique4(arr){
	var res = [];
	arr.forEach((val)=>{
		if( ! res.includes(val) ){
			res.push(val);
		}
	});
	return res;
}
arr_unique4(arr);
//(13) [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

该方法也算是比较完美，没有什么遗漏的地方

reduce + includes

function  arr_unique5(arr){
	return arr.reduce( (prev, cur )=>{
		if(  ! prev.includes(cur) ){
			prev.push(cur);
		}
		return prev;	
	} ,[]);
}
arr_unique5(arr);
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

嵌套循环+splice

function arr_unique6(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);
			}
		}
	}
	return arr;
}
arr_unique6(arr);
//(14) [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]

这是最麻烦的方法，效率十分低下，每一个循环都会去动态获取数组的length。且该方法无法过滤掉NaN，因为NaN === NaN的结果为false。

hash+hasOwnProperty+JSON.stringify

function arr_unique7(arr){
	var hash = {};
	return arr.filter( (val)=>{
		return hash.hasOwnProperty( typeof  val + JSON.stringify(val) ) ?
		 false : hash[typeof val + JSON.stringify(val)] = true ;
	});
}
arr_unique7(arr);
//(12) [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]

这种方法是终极版的，因为它可以进行数组中的对象元素的去重哦！前面的几种方法是不可以进行对象去重的。不过话说回来，JS中的对象是本身就是一个地址的引用，比如 {} == {} ;//false，两者是两个不同的对象，这里我们将其进行JSON.stringify进行简化。

总结

一个简单的数组去重，就可以衍生这么多的知识点！！！学习知识还是要学会融会贯通啊。