手写数组去重方法大全

·  阅读 118
手写数组去重方法大全

在日常的开发当中,我们经常会遇到数组去重的场景,通常来说不会的就网上查一下,用完即溜,不会彻底的去深究到底有多少种方法可以解决这个问题,今天刚好有空,咱们一起来罗列一下,加深加深印象。

一、new Set去重(ES6中最常用)

function unique (arr) {
  return Array.from(new Set(arr))
}
function unique (arr) {
  return [...new Set(arr)]
}
// input
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
// output
[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}, {}]

// {}没有去重
复制代码

如果不考虑兼容性,这种去重的方法代码最少。这种方法还无法去掉“{}”空对象,后面的高阶方法会添加去掉重复“{}”的方法。

二、利用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;
}
// input
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
// output
==  [1, 'true', 15, false, undefined, NaN, NaN, 'NaN', 'a', {}, {}]
===  [1, 'true', true, 15, false, undefined, null, NaN, NaN, 'NaN', 0, 'a', {}, {}]   
复制代码

== 的情况
NaN和{}没有去重,两个null、true直接消失了

=== 的情况

NaN 和 {}没有去重

三、利用indexOf判断法

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
[1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {}, {}]  
// NaN、{}没有去重
复制代码

新建了一个空数组,遍历老数组的项是否存在于新数组

四、利用includes

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
        if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
            array.push(arr[i]);
        }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))

[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]     
// {}没有去重
复制代码

和第三种是一个意思

五、利用hasOwnProperty判断属性

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   
//所有的都去重了
复制代码

六、利用Map数据结构去重

function arrayNonRepeatfy(arr) {
    let map = new Map();
    let array = new Array();  // 数组用于返回结果
    for (let i = 0; i < arr.length; i++) {
        if(map.has(arr[i])) {  // 如果有该key值
            map.set(arr[i], true); 
        } else { 
            map.set(arr[i], false);   // 如果没有该key值
            array.push(arr[i]);
        }
    } 
    return array ;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(arrayNonRepeatfy(arr))
[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}, {}]
// {}没有去掉
复制代码

七、利用reduce+includes

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
[1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {}, {}]
// {}没有去掉
复制代码

总结

1、大家在解决数组去重问题时,如果数组项存在 {} 对象时,多留个心眼,因为大部分常用的去重方法都无法解决,需要通过hasOwnProperty来处理,也就是上面的第五种方法

2、大家在做遍历属性值对比时尽量采用 ===

各位大佬,如果有更多解决方法,可以留言,我补上

分类:
前端
分类:
前端