js数组去重的多种方法

数组去重也是前端面试中很常见的一个问题

一、双层循环

比较相同的值，使用splice删除重复元素

        function uniqueArr(arr){
        	if(!Array.isArray(arr)){
                alert("type error");
                return;
            }
            for(let i=0;i<arr.length;i++){
                for(let j=i+1;j<arr.length;j++){
                    if(arr[i] === arr[j]){
                        arr.splice(j,1);
                        j--;
                    }
                }
            }
            return arr;
        }

二、indexOf去重

        function uniqueArr(arr){
            if(!Array.isArray(arr)){
                alert("type error");
                return;
            }
            var resArr=[];
            for(let i=0;i<arr.length;i++){
               if(resArr.indexOf(arr[i])<=-1){
                   resArr.push(arr[i]);
               }
            }
            return resArr;
        }

三、使用sort()方法

排序后对比相邻元素值是否相等来去重
这个方法只能实现同类型数据的去重，由于sort会把排序内容转成字符串类型再进行排序，因此如果类似下面的数组（存在boolean类型的true和string类型的true）就无法正常排序

var arr=[1,"str",2,4,2,"true",3,"abc","string","string","string","string","string",true,"true","str",3,2,1,"sss","abc",true,"string"];
        function uniqueArr(arr){
            if(!Array.isArray(arr)){
                alert("type error");
                return;
            }
            arr=arr.sort();
            var resArr=[arr[0]];
            for(let i=1;i<arr.length;i++){
                if(arr[i]!==arr[i-1]){
                   resArr.push(arr[i]);
                }
            }
            return resArr;
        }
        console.log("uniqueArr",uniqueArr(arr));

四、遍历数组法

这种方法最简单最直观，也最容易理解，代码如下：

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr) // 结果：[2, 8, 5, 0, 6, 7]

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

//这种方式会导致null和’null’,true和’true’,undefined和’undefined’,等也会去重

function uniqueArr(arr){
            if(!Array.isArray(arr)){
                alert("type error");
                return;
            }
            var obj={};
            var resArr=[];
            for(let i=0;i<arr.length;i++){
                if(!obj[arr[i]]){
                    obj[arr[i]]=1;
                    resArr.push(arr[i]);
                }
            }
            return resArr;
        }

六、使用map数据结构去重

创建一个空的map数据结构，因为map中不能有重复的key，因此通过判断map中是否存在某个key值来达到去重的效果

function uniqueArr(arr){
            if(!Array.isArray(arr)){
                alert("type error");
                return;
            }
            var map =new Map();
            var resArr =[];
            for(let i=0;i<arr.length;i++){
                if(map.has(arr[i])){
                    map.set(arr[i],true);
                }else{
                    map.set(arr[i],false);
                    resArr.push(arr[i]);
                }
            }
            return resArr;
        }

七、利用set不能存在相同的key值来实现去重的效果

function uniqueArr(arr){
            if(!Array.isArray(arr)){
                alert("type error");
                return;
            }
            return Array.from(new Set(arr)) ;
        }

或者

function uniqueArr(arr){
            if(!Array.isArray(arr)){
                alert("type error");
                return;
            }
            return [...new Set(arr)];
        }

八、优化的遍历数组法

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2, 8]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        i++
        j = i
      }
    }
    newArr.push(arr[i])
  }
  console.log(newArr) // 结果：[0, 5, 6, 7, 2, 8]