js数组去重,能用几种方法实现?

546 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第20天,点击查看活动详情

写这一篇主要是由于面试官面试经常会问到的一个问题,你用过那些数组去重的方法?我当时就是一脸懵逼的状态只记得Set方法,下面就列举几种数组去重的方法,不至于面试官一问就一脸懵逼。

使用es6 Set方法 (ES6中最常用)

Set类似数组,但是数组内元素会重复。Set中的值是唯一的,不会有重复的值,这就是Set的特点。

let arr=[1,2,3,4,3,2,3,4,6,7,6];
let unique = new Set(arr);
console.log (unique);

ES6中Set方法是(ES6中最常用),不用考虑兼容性,这种去重的方法代码最少。

[...new Set(arr)]

let san =[...unique];
console.log (san);
//[1,2,3,4,6,7]

利用新数组indexOf查找

indexOf()方法可返回某个指定的元素在数组中首次出现的位置。如果没有就返回-1。

function unique(arr ){ 
    var newArr=[];
    for( var i=0;i<arr .length;i++){
        if(newArr.indexOf(arr [i])==-1){
    }
    return newArr;
}

for双重循环

通过判断第二层循环,去重的数组中是否含有该元素,有就退出第二层循环,如果没有j==result.length就相等,然后把对应的元素添加到最后的数组里面。

let arr = [1,2,3,4,3,2,3,4,6,7,6];
let result = [];
for(var i =0; i < arr.length; i ++){
    for(var j=0; j < result.length; j ++){
        if(arr [i] === result [j]){
        break;
        };
    };
    if(j == result.length){
    result.push(arr[i]);
    };
};
console.log(result);
//[1,2,3,4,6,7]

利用for嵌套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]){
            //第一个等同于第二个,splice方法删除第二个
            arr.splice(j,1);
            j--;
            }
        }
    }
    return arr;
}

利用for嵌套for,然后splice去重(ES5中最常用)双层for循环,外层for循环元素,内层for循环时比较值。如值相同时,则删去这个值。

利用filter

let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique = (arr) =>{
    return arr.filter((item,index)=>{
        return arr.indexOf(item) === index;
    });
};
unique(arr);
// [1, 2, 3, 4, 6, 7]

利用Map数据结构去重

创建一个空Map数据结构,遍历所需要去重的数组,然后把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值,所以最终得到的就是去重后的结果。

let arr = [1,2,3,4,3,2,3,4,6,7,6];
let unique=(arr)=>{
    let seen = new Map();
    return arr.filter((item)=>{
        return ! seen.has(item) & &seen.set(item,1);
    });
};
unique(arr);
//[1, 2, 3, 4, 6, 7]

总结

js数组去重有这些方法解决 (具体使用参考上面的列子)

  • 使用indexof()方法
  • 使用includes()方法
  • 使用lastindexof()方法和indexof方法一样indexof从头部开始匹配lastindexof从尾部匹配
  • ES6的set结构set不接受重复数据,使用sort方法先将原数组排序,然后与相邻的比较,如果不同则存入新数组
  • 使用filiter和indexof方法
  • 使用ES6的set和扩展运算符
  • 使用set和Array.from()方法array.from可以将set结构转成数组
  • 使用splice和双层循环