JavaScript数组去重总结

2024年4月10日 122次阅读 来源: guihailiuli

声明:
本文给出的大多数要领都不是原创，在具体要领运用时给出了出处的链接，不过有部份要领完成较简朴许多处所都有，所以未说明，在末了会给出一切的参考链接。文章来自个人博客, 转载请说明出处。

需求：

给定一个数组，内里有反复的数字，字符串，或者是二维的数组、对象等，将内里的反复的去除，并返回新数组

针对数字及字符串的要领

测试数组为： var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];

要领一
思绪：用两个for轮回，互相比较然后去掉反复的数字。
完成：

var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
var uniqArray1 = function(arr) {
    var uniqArr = [];
    var arrLen = arr.length;
    for(var i = 0; i < arrLen; i++) {
          for(var j = i + 1; j < arrLen; j++) {
              if(arr[i] == arr[j]) {
                  j = ++i;
              }
        }
          uniqArr.push(arr[i]);
    }
      return uniqArr;
};
console.log(uniqArray1(arr));
//[ 7, '1', '3', '5' ]

要领一轻易想到，然则当测试数据许多时，因为两重轮回会致使机能很差。

要领二
思绪：新建数组，遍历原数组，检测当新数组中不存在原数组中的元素时将其push进去，末了返回新数组
完成：

var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
var uniqArray2 = function(arr) {
    var newArr = [];
    for(var i = 0,arrLen = arr.length; i < arrLen; i++) {
        //indexOf在IE8一下不支撑
        if(newArr.indexOf(arr[i]) == -1) {   
            newArr.push(arr[i]);
        }
    }
    return newArr;
};
console.log(uniqArray2(arr));
//[ 1, 7, '1', 3, 5, '3', '5' ]

比要领一的机能好一些，然则关于须要斟酌IE6-8的，须要分外再加点代码:

//该代码来自：http://www.cnblogs.com/wteam-xq/p/4732351.html
//推断浏览器是不是支撑indexOf ，indexOf 为ecmaScript5新要领 IE8以下（包含IE8， IE8只支撑部份ecma5）不支撑
if (!Array.prototype.indexOf){
  // 新增indexOf要领
  Array.prototype.indexOf = function(item){
    var result = -1, a_item = null;
    if (this.length == 0){
      return result;
    }
    for(var i = 0, len = this.length; i < len; i++){
      a_item = this[i];
      if (a_item === item){
        result = i;
        break;
      }  
    }
    return result;
  }
}

要领三
思绪：应用sort要领排序，然后比较数组中前后两个数字是不是雷同，去掉不雷同的返回新数组
完成：

var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
var uniqArray3 = function(arr) {
    arr.sort();
    var newArr = [arr[0]];
    for(var i = 1, arrLen = arr.length; i < arrLen; i++) {
        if( arr[i] != newArr[newArr.length- 1]) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
};
console.log(uniqArray3(arr));
//[ 1, 3, 5, 7 ]

一个关于sort要领的小插曲:

关于sort要领须要补充一点，假如须要应用sort举行升序或降序分列，为了完成排序，
sort()要领会挪用每一个数组项的toString()转型要领，然后比较获得的字符串肯定怎样排序，比方：

var values = [1,10,5,65,666,223];
values.sort();
console.log(values);
//[ 1, 10, 223, 5, 65, 666 ]

纵然数组中每一项都是数值，sort()比较的也是字符串，而在比较字符串时”10″位于”5″前面，因而数组的递次就不是预期的了。
sort能够接收一个比较函数，进而到达我们预期的比较效果：

function compare(a , b) {
    if( a < b) {
        return -1;
    }else if(a>b) {
        return 1;
    }else {
        return 0;
    }
}
var values = [1,10,5,65,666,223];
values.sort(compare);
console.log(values);
//[ 1, 5, 10, 65, 223, 666 ]

如许就获得了升序分列，而想要降序时，只须要在打印时reverse()一下即可。

要领四
思绪：应用对象中是不是有一样的属性举行比较。
完成：

//from:http://blog.jobbole.com/33099/
var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
var uniqArray4 = function(arr) {
    var result = [];
    var hash = {};    
    var item,key;
    for(var i = 0, arrLen = arr.length; i < arrLen; i++) {
        item = arr[i];
        //对象的键值只能是字符串，
        key = typeof(item) + item;   //辨别数值 1 和字符串 '1' 等状况
        if(!hash[key]) {  
              result.push(item);  //hash用来反射key是不是反复
              hash[key] = true;   //表明该值存进新数组了
        }
    }
    return result;
};
console.log(uniqArray4(arr));
//[ 1, 7, '1', 3, 5, '3', '5' ]

要领五
思绪：应用对象字面量的key和value关联性，
完成：

//from: https://segmentfault.com/q/1010000000262609
var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
var uniqArray5 = function(arr) {
    var obj = {};
    var len = arr.length;
    for(var i = 0; i < len; i++) {
       obj[arr[i]] = arr[i];
    }
    return Object.keys(obj);
};
console.log(uniqArray5(arr));
//[ '1', '3', '5', '7' ]

要领六
思绪：应用数组的filter要领
完成：

//from: https://segmentfault.com/q/1010000003864059
var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
var uniqArray6 = function(arr) {
    return arr.filter(function (elem, index) {
        return arr.indexOf(elem) === index;
    });
};
console.log(uniqArray6(arr));
//[ 1, 7, '1', 3, 5, '3', '5' ]

关于filter()要领的补充：
filter: 对数组中的每一个元素挪用参数中指定的过滤函数，并将关于过滤函数返回值为true的那些数组元素集合为新的数组返回。

要领七
思绪：应用数组的filter要领

var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
  var uniqArray8 = arr.filter(function(element, index,array) {
        return array.indexOf(element) >= index;
    });
console.log(uniqArray8);
//[ 1, 7, '1', 3, 5, '3', '5' ]

要领八
思绪：应用数组的filter要领

var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
 var uniqArray9 = arr.filter(function(element, index,array) {
    return arr.lastIndexOf(element) === index;
    });
console.log(uniqArray9);
//[ 7, 1, '1', 5, 3, '3', '5' ]

要领九
思绪：应用reduce要领

var arr = [1, 7, 7, 1, '1',3, 5, 3, '3', '5'];
   var uniqArray8 = function(a) {
       return a.reduce(function(p, c) {
           if (p.indexOf(c) < 0) p.push(c);
           return p;
       }, []);
    };
console.log(uniqArray8(arr));
//[ 1, 7, '1', 3, 5, '3', '5' ]

关于reduce要领的补充：
reduce()要领从数组的第一项最先，在每一项上挪用函数，这个函数返回的任何值都邑作为第一个参数自动传给下一项。

要领十
运用ES6的set要领。

Array.prototype.getUnique = function() {
    return [...new Set( [this] )];
};

要领十一
运用jQuery
完成：

//from:http://stackoverflow.com/questions/1960473/unique-values-in-an-array
(function($){
    var _old = $.unique;
    $.unique = function(arr){
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        } else {
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);

var arr = ['first',7,true,2,7,true,'last','last'];
$.unique(arr); 
// ["first", 7, true, 2, "last"]

var arr = [1,2,3,4,5,4,3,2,1];
$.unique(arr); 
// [1, 2, 3, 4, 5]

针对二维数组的去重要领

思绪：经由过程isArray要领推断数组中是不是另有数组，假如有数组，在该数组上再次遍历
完成：

//from: https://segmentfault.com/q/1010000000444289
var arr = [1,2,3,[1,1,2],[3,2],2];
var uniqArray11 = function(arr) {
    var result = arr.reduce(function(v, i) {
        //推断有无二维数组
        if(Array.isArray(i)) {
            i.forEach(function(item) {
                if(v.indexOf(item) < 0) {
                    v.push(item);
                }
            });
        }else if(v.indexOf(i) < 0){
            v.push(i);
        }
        return v;
    }, []);
  return result;
};
console.log(uniqArray11(arr));
//[ 1, 2, 3 ]

针对对象的去重要领

完成：

//from:http://stackoverflow.com/questions/1960473/unique-values-in-an-array
Array.prototype.getUnique = function() {
        var hash = {}, result = [], key; 
        for ( var i = 0, l = this.length; i < l; ++i ) {
            key = JSON.stringify(this[i]);
            if ( !hash.hasOwnProperty(key) ) {
                hash[key] = true;
                result.push(this[i]);
            }
        }
        return result;
    };

var data = [
        {
            name: "aaa",
            value: 123
        },
        {
            name: "bbb",
            value: 234
        },
        {
            name: "aaa",
            value: 123
        },
        {
            name: "bbb",
            value: 789
        }
    ];
console.log(data.getUnique()); 
//[ { name: 'aaa', value: 123 },
//  { name: 'bbb', value: 234 },
//  { name: 'bbb', value: 789 } ]

文章参考链接

下面是本文所述要领的泉源链接：

http://www.cnblogs.com/wteam-xq/p/4732351.html

http://blog.jobbole.com/33099/

https://segmentfault.com/q/1010000000262609

https://segmentfault.com/q/1010000003864059

https://segmentfault.com/q/1010000000444289

http://stackoverflow.com/questions/1960473/unique-values-in-an-array

http://stackoverflow.com/questions/11246758/how-to-get-unique-values-in-an-array

    原文作者：guihailiuli
    原文地址: https://segmentfault.com/a/1190000004605229
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞