JavaScript数组去重 (10种方法)

数组去重,一般面试的时候遇到的概率比较大(本人遇到了不低于三次),一般会让你手写数组去重的代码。如果面试官问你去重的方法有哪些?你若是可以答出8种以上就很不错了,面试官也会对你刮目相看。

在真实的项目中碰到的数组去重,一般都是后台去处理## 标题,很少让前端处理数组去重。虽然日常项目用到的概率比较低(数据统计处理的项目可能会用到),但还是需要了解一下,以防面试的时候可能回被问到。

数组去重的方法

一.ES6 的 Set() ES6常用

	function unique(arr) {
		return new Set(arr);
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[1,"1",null,NaN,"NaN",undefined,{},{},0]  // {}没有被去重

二、利用双重for循环 加上splice()去重 ES5 常用

	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;
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[1, "1", null, NaN, NaN, "NaN", undefined, {…}, {…}, 0]  //NaN、{}没有被去重

三、利用indexOf去重

	function unique(arr) {
	    if (!Array.isArray(arr)) {
	        console.log('type error!')
	        return
	    }
	    var array = [];
	    for (var i = 0; i < arr.length; i++) {
	        if (array .indexOf(arr[i]) === -1) {
	            array .push(arr[i])
	        }
	    }
	    return array;
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[1, "1", null, NaN, NaN, "NaN", undefined, {…}, {…}, 0]  //NaN、{}没有被去重

四、利用sort() 排序去重

	function unique(arr) {
	    if (!Array.isArray(arr)) {
	        console.log('type error!')
	        return;
	    }
	    arr = arr.sort()
	    var arrry= [arr[0]];
	    for (var i = 1; i < arr.length; i++) {
	        if (arr[i] !== arr[i-1]) {
	            arrry.push(arr[i]);
	        }
	    }
	    return arrry;
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[0, 1, "1", NaN, NaN, "NaN", {…}, {…}, null, undefined]  //NaN、{}没有被去重

五、利用对象的属性名不能重复去重

	function unique(arr) {
	    if (!Array.isArray(arr)) {
	        console.log('type error!')
	        return
	    }
	    var arrry= [];
	     var  obj = {};
	    for (var i = 0; i < arr.length; i++) {
	        if (!obj[arr[i]]) {
	            arrry.push(arr[i])
	            obj[arr[i]] = 1
	        } else {
	            obj[arr[i]]++
	        }
	    }
	    return arrry;
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[0, 1, NaN, {…}, null, undefined]  //都去重了,但是问题也很明显,键名都当成字符串来处理了,去了一些不该去的

六、利用includes 去重

	function unique(arr) {
	    if (!Array.isArray(arr)) {
	        console.log('type error!')
	        return
	    }
	    var array =[];
	    for(var i = 0; i < arr.length; i++) {
	            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
	                    array.push(arr[i]);
	              }
	    }
	    return array
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[0, 1, "1", NaN, NaN, "NaN", {…}, {…}, null, undefined]  //NaN、{}没有被去重

七、利用Object.hasOwnProperty 去重

	function unique(arr) {
	    var obj = {};
	    return arr.filter(function(item, index, arr){
	        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
	    })
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[0, 1, "1", NaN, "NaN", {…}, null, undefined]  //所有的都去重了

八、利用filter 去重

	function unique(arr) {
	  return arr.filter(function(item, index, arr) {
	    //当前元素,在原始数组中的第一个索引==当前索引值,否则返回当前元素
	    return arr.indexOf(item, 0) === index;
	  });
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[0, 1, "1", "NaN", {…}, {…}, null, undefined]  // {}没有去重 NaN被去掉了

九、利用reduce+includes 去重

	function unique(arr){
	    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));  
	//[0, 1, "1", NaN, "NaN", {…}, {…}, null, undefined]   //{}没有去重

十、…扩展运算符 + Set 去重

	function unique(arr){
		return [...new Set(arr)]
	}
	let array = [1,1,'1','1',null,null,NaN,NaN,'NaN',undefined,undefined,{},{},0,0]
	console.log(unique(array));
	//[0, 1, "1", NaN, "NaN", {…}, {…}, null, undefined] //{}没有被去重

以上总结出十种数组去重的方法,如有问题和优化方案还请指出,转载请注明出处,谢谢。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值