JavaScript数组去重方法汇总

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript数组去重方法汇总相关的知识,希望对你有一定的参考价值。

1.运用数组的特性

  1.遍历数组,也遍历辅助数组,找出两个数组中是否有相同的项,若有则break,没有的话就push进去。

  

//第一版本数组去重
function unique(arr){
    var  res = [],
         len = arr.length;
    for(let i = 0;i < len; i++){
        var reslen = res.length;
        for(let j = 0;j < reslen; j++){ //遍历辅助数组
            if(arr[i] === res[j]){
                break;
            }
        }
        if(j === reslen){
            res.push(arr[i]); //没有就添加进去
        }
    }
    return res;
}

  

  2.运用es5的indexOf方法

//第二版本数组去重 es5语法, IE8不能用
function unique(arr){
    var len = arr.length,
        res = [];
    for( let i = 0; i < len ; i++){
        let val = arr[i];
        if(res.indexOf(val) === -1){ //找不到返回-1
            res.push(arr[i]);
        }
    }
    return res;
}

  

  3.如果数组已经排好序

function unique(arr){
    var len = arr.length;
        last,
        res = [];
    for(let i = 0;i < len; i++){
        let val = arr[i];
        if(val !== last){ //用last存储上一次的值
            res.push(val);
        }
        last = val;
    }
    return res;
}

  

  4.留一个接口,传一个参数判断数组是否已经排好序

function unique(arr, isSort){
    var len = arr.length,
        res = [],
        last;
    if(isSort !== ‘boolean‘){
        isSort = false;
    }
    for(let i = 0;i < len; i++){
        var val = arr[i];
        if(isSort){
            if(!i || val!== last){
                res.push(val);
            }
            last = val;
        }else{
            if(res.indexOf(val) === -1){
                res.push(val);
            }
        }
    }
    return res;
}

 

  5.如果有特殊需求的话,留一个接口,更灵活

function unique(arr, isSort, fn){
    var res = [],
        len = arr.length,
        newArr = [],
        last;
    for(let i = 0;i < len; i++){
        var val = arr[i],
            com = fn ? fn(val, i, arr) : val;
        if(isSort){
            if(!i || com === last){
                res.push(val);
            }
            last = com;
        }else if(fn){
            if(newArr.indexOf(com) === -1){
                newArr.push(com);
                res.push(val);
            }
        }else if(res.indexOf(val === -1)){
            res.push(val);
        }
    }
    return res;
}

 

  6.用内部 filter 方法优化

function unique(arr){
    var res = [],
    res = arr.filter(function(item, index, arr){
        return res.indexOf(item) === index;  //返回true则添加到数组res,否则不添加
    });
    return res;
}

 

2.运用对象的特性

  1.第一种方法

function unique(arr){
    var obj = {},
        res = [],
    res = arr.filter(function (item, index, aee){
        return obj.hasOwnProperty(item) ? false : (obj[item] = true);
    });
    return res
}

 

  注意: 有一个Bug,var  = [ 1,1,"1",2],不能识别number类型的和string类型,添加到对象中都会转化为string。

  2.第二种方法

 

function unique(arr){
    var obj = {},
        res = [],
        len = arr.length;
    res = arr.filter(function (item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (typeof item + item) = true;  
    });
    return res;
}

  注意:这里也有bug,因为typeof的返回类型,检测不了对象。

  3.第三种方法

  运用json方法进行优化。

function unique(arr){
    var obj = {},
        res = [],
        len = arr.length;
    res = arr.filter(function (item, index, arr){
        return obj.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (typeof item + JSON.stringify(item)) = true;
    })
    return res;
}

3.ES6中的Set()对象

function unique(arr){
    return [...new Set(arr)];
}

以上是关于JavaScript数组去重方法汇总的主要内容,如果未能解决你的问题,请参考以下文章

JS数组去重的方法汇总

js 数组去重方法汇总

JS 数组常见操作汇总,数组去重降维排序多数组合并实现思路整理

JavaScript数组去重

js实现数组去重(方式大汇总)

javaScript数组去重方法