js数组去重的常见方法总结

js数组去重的常见方法总结

由于在项目中前后端的分离，大多数时候前端只需要负责页面渲染和逻辑交互的工作，一般的数据处理都由后端完成，所以数组去重在实际工作中可能用得并不是特别多，但玩转数组这么有趣的事情，还是值得玩一下的。

一、创建新数组,把原数组中不重复的值存到新数组中

1、利用indexof判值

function unique(arr){
    var newArr=[]//创建一个新数组来接收不重复的值
    if(!Array.isArray(arr)){//判断是否为数组
        console.log("请传入数组！");
        return;
    }
    for(var i=0;i<arr.length;i++){//遍历原数组
        if(newArr.indexOf(arr[i])==-1){//判断新数组中是否已有相同的值，
            newArr.push(arr[i])//若没有，则推入新数组中
        }
    }
    return newArr;//返回新数组
}

2、利用includes

function unique(arr){
    var newArr=[]//创建一个新数组来接收不重复的值
    if(!Array.isArray(arr)){//判断是否为数组
        console.log("请传入数组！");
        return;
    }
    for(var i=0;i<arr.length;i++){//遍历原数组
        if(!newArr.includes(arr[i])){//判断新数组中是否已有相同的值，
            newArr.push(arr[i])//若没有，则推入新数组中
        }
    }
    return newArr;//返回新数组
}

3、利用indexof判下标

function unique(arr){
    var newArr=[]//创建一个新数组来接收不重复的值
    if(!Array.isArray(arr)){//判断是否为数组
        console.log("请传入数组！");
        return;
    }
    for(var i=0;i<arr.length;i++){//遍历原数组
        if(arr.indexOf(arr[i])===i){//如果当前数组的第i项在当前数组中第一次出现的位置是i
            newArr.push(arr[i])//推入新数组，否则说明是重复的
        }
    }
    return newArr;//返回新数组
}

4、利用sort先排序

function unique(arr){
    if(!Array.isArray(arr)){//判断是否为数组
        console.log("请传入数组！");
        return;
    }
    arr=arr.sort();
    var array=[arr[0]];//先存入原数组的第一个数
    for(var i=1;i<arr.length;i++){
        if(arr[i]!==arr[i-1]){//相邻去除
            array.push(arr[i])
        }
    }
    return array;
}

二、两次遍历数组，去除重复元素

1、双重for循环

 function unique(arr){
    if(!Array.isArray(arr)){//判断是否为数组
        console.log("请传入数组！");
        return;
    }
    for(var i=0;i<arr.length;i++){
        for(var j=i+1;j<arr.length;j++){
            if(arr[i]==arr[j]){//数组中i下标后的j上有重复值，则用splice方法（可改变原数组）删除
                arr.splice(j,1);
                j--;//删除后下标-1
            }
        }
    }
    return arr;
}

2、利用filter

function unique(arr){
    return arr.filter((item,index,arr)=>arr.indexOf(item,0)===index);//同一中的第三种方法
}

三、利用ES6中的Set方法

1、结合Array.from

function unique (arr) {
  return Array.from(new Set(arr))
}

2、结合扩展运算符（…)

function unique(arr){
    return [...new Set(arr)];//同一中的第三种方法
}