首页 > 建站教程 > JS、jQ、TS >  JS进阶篇5---JS数组去重的n种方式正文

JS进阶篇5---JS数组去重的n种方式

js数组去重的方法总结:

1、利用 indexOf() 方法之一
Array.prototype.unique = function(){
    var temp = [];
    for (var i = 0;i < this.length;i++){
        // 如果当前数组的第 i 项已经保存到了临时数组,那么跳过
        if(temp.indexOf( this[i] ) == -1){
            temp.push( this[i] );
        }
    }
    return temp;
}
2、利用 indexOf() 方法之二
Array.prototype.unique = function(){
    var temp = [ this[0] ];
    for (var i = 1;i < this.length;i++){
        // 如果当前数组元素在数组中第一次出现的位置不是i,说明是重复元素
        if(this.indexOf( this[i] ) == i){
            temp.push( this[i] );
        }
    }
    return temp;
}
3、优化遍历数组法
Array.prototype.unique = function(){
    var hash=[];
    // 双层循环,外循环表示从 0 到 arr.length
    for (var i = 0; i < this.length; i++) {
        // 内循环表示从 i+1 到 arr.length
        for (var j = i+1; j < this.length; j++) {
            if(this[i]===this[j]){
                // 检测到有重复值时终止当前循环同时进入外层循环的下一轮判断
                ++i;
            }
        }
        // 将没重复的右边值放入新数组
        hash.push(this[i]);
    }
    return hash;
}
4、排序后再进行数组去重
Array.prototype.unique = function(){
    this.sort(function( a,b ){ return a-b; });
    var temp = [ this[0] ];
    for (var i = 0;i < this.length;i++){
        if( this[i] != this[i-1]){
            temp.push( this[i] );
        }
    }
    return temp;
}
5、利用数组 filter 方法过滤
Array.prototype.unique = function unique() {
    var res = this.filter(function(item, index, array) {
        return array.indexOf(item) === index;
    });
    return res;
}
6、利用对象属性的唯一性
Array.prototype.unique = function(){
    var temp = [],hash = {};    // hash 作为哈希表
    for (var i = 0;i < this.length;i++){
        if(!hash[ this[i] ]){    // 如果哈希表中没有当前项
            hash[ this[i] ] = true;
            temp.push(this[i])
        }
    }
    return temp;
}
7、利用 ES6 set 数据结构
Array.prototype.unique = function(){
    return Array.from(new Set(this));
}
上述七种方法中,经测试(测试数组元素个数从 1 万个- 1000 万个),代码运行速度从上到下依次降低,其中方法 1 和方法 2 速度差异不大,速度最慢,方法 3 的具体运行速度和数组具体情况相关,方法 4 速度比方法 1,2,3 快,但比方法 5,6,7 慢得比较多,方法 5,6,7 运行速度最快,且运行速度差异不大,不过鉴于 set 是 ES6 新加内容,在实际开发环境中,推荐使用稳定性和速度都比较不错的方法 5 和方法 6 。

拓展:若重复,则去掉该元素
function unique(arr){
    var hash=[];
    for (var i = 0; i < arr.length; i++) {
        if(arr.indexOf(arr[i])==arr.lastIndexOf(arr[i])){
            hash.push(arr[i]);
        }
    }
    return hash;
}