数组去重方法总结（10种）

た入场券 2022-12-26 09:12 128阅读 0赞

### 一、用ES6的Set方法 ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    //Set数据结构，它类似于数组，其成员的值都是唯一的
    let unique = Array.from(new Set(arr));
    //let unique = [...new Set(arr)]; //也可以使用展开运算符
    console.log(unique); //[1, true, "true", "false", null, undefined, NaN, "NaN", {…}, {…}]

原理：Set方法会对对象的hash结果和值进行比较，如果都相等则去重，否则保留。这种方法代码量少，缺点：兼容性不是最好的，无法去除空对象。

### 二、for循环 + indexOf / lastIndexOf / includes / find ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    let unique = [];
    for (let i = 0; i < arr.length; i++) { 
    //indexOf等于-1说明不存在
      if(unique.indexOf(arr[i]) == -1){ 
      	unique.push(arr[i]);
      }
    }
    console.log(unique); // [1, true, "true", "false", null, undefined, NaN, NaN, "NaN", {…}, {…}]

缺点：无法去重空对象和NaN

### 三、forEach + indexOf ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    let unique = [];
    arr.forEach(item=>{ 
    	if(unique.indexOf(item) == -1){ 
    	  	unique.push(item);
    	  }
    }) 
    console.log(unique); // [1, true, "true", "false", null, undefined, NaN, NaN, "NaN", {…}, {…}]

缺点：这种方法和for循环差不多，无法去重空对象和NaN

### 四、filter + indexOf ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    let unique = arr.filter((item,index) =>{ 
    	//当前元素在原始数组的第一个索引是否等于当前索引，等于说明该元素第一次出现则留下，不等则说明前面已经出现过则是重复的。
    	arr.indexOf(item) == item;
    })
    console.log(unique); // [1, true, "true", "false", null, undefined, "NaN", {…}, {…}]

缺点：无法去重空对象

### 五、排序数组去重 ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    arr = arr.sort();
    let unique = [];
    //先对数组排序，然后相邻的元素对比，不同的放到新数组里面。
    for(let i = 0;i<arr.length;i++){ 
    	if(arr[i] != arr[i+1]){ 
    		unique.push(arr[i]);
    	}
    }
    console.log(unique) //[1, NaN, NaN, "NaN", {…}, {…}, "false", null, true, "true"]

缺点：无法去重空对象和NaN

### 六、对象属性唯一性特征 ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
     let obj={ };
     let unique=[];
     //将数组值作为对象的属性名，当不存在时，则放入对象中 （利用对象的属性不可重复）
      for (let i = 0; i < arr.length; i++) { 
          if (!obj[arr[i]]) { 
              obj[arr[i]] = 1;
              unique.push(arr[i]);
          }   
      }
    console.log(unique); // [1, true, "false", null, undefined, NaN, {…}]

缺点：可以去重NaN和空对象，但是直接把“true”、“NaN”也去掉了

### 七、利用hasOwnProperty ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    let obj = { };
    //将数组值作为对象的属性名，当不存在时，则放入对象中 （利用对象的属性不可重复）
    //typeof item + item作为属性名
    let unique = arr.filter((item,index)=>{ 
    	return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
    console.log(unique); //[1, true, "true", "false", null, undefined, NaN, "NaN", {…}]

完美去重

### 八、reduce + inculdes ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    let unique = arr.reduce((prev,cur) => prev.includes(cur)?prev:[...prev,cur],[])
    console.log(unique); //[1, true, "true", "false", null, undefined, NaN, "NaN", {…}, {…}]

缺点：无法去重空对象

### 九、利用map数据结构去重 ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    let map = new Map();
    let unique = [];
    //因为map里面不会出现相同的key值，所以最后得到的map的key值是去重后的结果。
    //判断map里面是否有某个键，没有就push到unique里面同时给map添加一个键
    for(let i = 0;i<arr.length;i++){ 
    	if(!map.has(arr[i])){ 
    		map.set(arr[i],false);//false代表没有然后添加键
    		unique.push(arr[i]);
    	}
    }
    console.log(unique); //[1, true, "true", "false", null, undefined, NaN, "NaN", {…}, {…}]

缺点：无法去重空对象

### 十、递归去重 ###

let arr =[1,1,true,true,'true',"false","false",null,null,undefined,undefined,NaN,NaN,'NaN',{ },{ }];
    let unique = arr
    let len = unique .length;
    unique.sort(function(a,b){    //排序后更加方便去重
    	return a - b;
    })
    function recursive(index){ 
           if(index >= 1){ 
               if(unique[index] === unique[index-1]){ 
               unique.splice(index,1);
               }
               recursive(index - 1);    //递归loop，然后数组去重
           }
    }
    recursive(len-1);
    console.log(unique); //[1, true, "true", "false", null, NaN, NaN, "NaN", {…}, {…}, undefined]

缺点：无法去重空对象和NaN

发表评论取消回复

表情：

评论列表（有 0 条评论，128人围观）

还没有评论，来说两句吧...

相关阅读

相关数组去重的6种方法

数组去重 / indexOf 有就返回下标没有返回-1(第一次出现的位置) lastIndexOf 有就返回下标没有返回-1（最后一次出现的位置） find

怼烎@/ 2022年12月28日 11:14/ 0 赞/ 180 阅读

相关数组去重方法总结（10种）

一、用ES6的Set方法 let arr =[1,1,true,true,'true',"false","false",null,null,undefined,u

た入场券/ 2022年12月26日 09:12/ 0 赞/ 129 阅读

相关 js数组去重的10种有效方法 vue 数组去重

方法一思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。 function unique(arr) {

亦凉/ 2022年12月13日 14:06/ 0 赞/ 244 阅读

相关 JavaScript数组去重方法总结

数组不像对象和hash有唯一的标志特征(key)。所以，数组去重的核心就是【1】数组内元素互相比较，然后放入新的数组中。【2】参照对象构建一个唯一的特征标志，然后放入新数组中。

悠悠/ 2022年10月01日 09:49/ 0 赞/ 266 阅读

相关数组去重的一种方法

<body> <input type="button" value="去重" οnclick="signal()"> <script>

浅浅的花香味﹌/ 2022年06月09日 13:28/ 0 赞/ 290 阅读

相关数组去重方法总结

1、使用双重循环优点：兼容性好 function unique(arr){ var len=arr.length; if(le

逃离我推掉我的手/ 2022年05月27日 08:35/ 0 赞/ 226 阅读

相关 js数组去重五种方法

今天来聊一聊JS数组去重的一些方法，包括一些网上看到的和自己总结的，总共5种方法（ES5）。第一种：遍历数组法这种方法最简单最直观，也最容易理解，代码如下：

你的名字/ 2021年12月20日 16:11/ 0 赞/ 341 阅读

相关 ####javascript 数组去重（10种方法）

一、利用ES6 Set去重（ES6中最常用） set对象是值的集合,元素只会出现一次,即Set中的元素是唯一的. function unique (arr) {

Love The Way You Lie/ 2021年12月10日 05:51/ 0 赞/ 277 阅读

相关数组去重的方法总结

方法一 // var arr = \[1, 'a', 'a', 'b', 'd', 'e', 1, 0\]; // Array.prototype.unique1 = func

偏执的太偏执、/ 2021年11月01日 20:14/ 0 赞/ 401 阅读

相关 12种JavaScript数组去重方法（总结）

12种JavaScript数组去重方法（总结）数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其...

红太狼/ 2020年06月18日 15:55/ 0 赞/ 766 阅读