JS数组去重常见方法分析

数组去重是开发中经常会遇到的问题,也是面试时经常会考到的。JS实现数组去重可以有多种方法:

一、简单的去重方法

用一个类比来简单解释一下这种去重方法的思路:A篮子里有若干个不同颜色和大小的球,旁边放一个空篮子B。 我们将球挨个从A篮子里拿出来,如果B篮子里没有和手上拿着一模一样的球,就把它放到篮子B里。如果B篮子里已经有了一模一样的球,就把手上的球丢掉。那等到A篮子里被取空的时候,B篮子的球就会彼此之间都不完全相同。代码如下:

// 简单数组去重法

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

var arr1 = [1,2,2,3,5,3,5,9];

console.log(unique(arr1)); 

var arr2 = ['a','c','e','a','c','f'];

console.log(unique(arr2));

var arr3 = [1,2,"2",2,'a','c',3,'2','e',5,3,5,'a',9,'c','f'];

console.log(unique(arr3)); 

var arr4 = [1,2,"2",2,'a','c',3,'2',{k:123},'e',5,3,5,'a',9,[1,2,3],'c','f',[1,2,3],[1,'2',3],[4,5,6],{k:123},{k:'123'},{f:234}];

console.log(unique(arr4)); 

得到的结果为:

[1, 2, 3, 5, 9]

["a", "c", "e", "f"]

[1, 2, "2", "a", "c", 3, "e", 5, 9, "f"]

[1, 2, "2", "a", "c" 3, {k:123}, "e", 5, 9, [1,2,3], "f", [1,2,3], [1,"2",3], [4,5,6], {k:123}, {k:"123"}, {f:234} ]

需要说明的是由于数组和对象都是引用类型,对比时实际上是在对比指针地址,所以是不会相等的,以下的其他方法也遵循该原则

此方法从效果来讲,还是符合要求的。

当然有人会说 IE8等旧浏览器不支持array的indexOf的方法,那我们也很容易用遍历的方法来代替indexOf方法。但我觉得大多数情况下,为了爱惜生命,我们早就应该远离IE8等古董级浏览器了。

二、排序相邻去重法

解题思路为: 将数组的所有元素按统一标准排序。那么相同的元素肯定会相邻。然后去除重复的元素。代码如下:

//排序相邻去重法

function unique(arr){
    arr.sort();
    var temp=[arr[0]];
    for(var i = 1; i < arr.length; i++){
        if( arr[i] !== temp[temp.length-1]){
            temp.push(arr[i]);
        }
    }
    return temp;
}

var arr1 = [1,2,2,3,5,3,5,9];

console.log(unique(arr1)); 

var arr2 = ['a','c','e','a','c','f'];

console.log(unique(arr2));

var arr3 = [1,2,"2",2,'a','c',3,'2','e',5,3,5,'a',9,'c','f'];

console.log(unique(arr3)); 

var arr4 = [1,2,"2",2,'a','c',3,'2',{k:123},'e',5,3,5,'a',9,[1,2,3],'c','f',[1,2,3],[1,'2',3],[4,5,6],{k:123},{k:'123'},{f:234}];

console.log(unique(arr4)); 

结果为:

[1, 2, 3, 5, 9]

["a", "c", "e", "f"]

[1, 2, "2", 2, "2", 3, 5, 9, "a", "c", "e", "f"]

[1, [1, 2, 3], [1, 2, 3], [1, "2", 3], 2, "2", 2, "2", 3, [4, 5, 6], 5, 9, {k: 123}, {k: 123}, {k: "123"}, {f: 234}, "a", "c", "e", "f"]

从结果中看出,此方法只在纯数字或者纯字符的数组中有效。究其原因为排序出了问题。

解决的思路为:我们可以将数组中的元素按类型分到几个不同的数组中,然后分别各自排序相邻去重,然后再合并为一个数组,但这样显然是比较复杂了。

三、数组下标法

实现思路:遍历数组中的每一项,如果当前数组的第i项在当前数组中第一次出现的位置不是i,那说明i项的值存在重复。 这个方法比上面的两种方法更简单有效。 代码如下:

//数组下标法

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

var arr1 = [1,2,2,3,5,3,5,9];

console.log(unique(arr1)); 

var arr2 = ['a','c','e','a','c','f'];

console.log(unique(arr2));

var arr3 = [1,2,"2",2,'a','c',3,'2','e',5,3,5,'a',9,'c','f'];

console.log(unique(arr3)); 

var arr4 = [1,2,"2",2,'a','c',3,'2',{k:123},'e',5,3,5,'a',9,[1,2,3],'c','f',[1,2,3],[1,'2',3],[4,5,6],{k:123},{k:'123'},{f:234}];

console.log(unique(arr4)); 

结果为:

[1, 2, 3, 5, 9]

["a", "c", "e", "f"]

[1, 2, "2", "a", "c", 3, "e", 5, 9, "f"]

[1, 2, "2", "a", "c", 3, {k: 123}, "e", 5, 9, [1, 2, 3], "f", [1, 2, 3], [1, "2", 3], [4, 5, 6], {k: 123}, {k: "123"}, {f: 234}]

此方法从效果来讲,是符合要求的。

四、对象键值去重法

解题思路:新建一个对象以及新数组,遍历传入数组时,判断值是否为对象的键,不是的话给对象新增该键并放入新数组。 不同的键可能会被误认为一样,例如n[1]、n["1"],所以还得加上类型的判断。

//对象键值去重法

function unique(arr){
    var temp = {}, result = [], len = arr.length, val, type;
    for (var i = 0; i < len; i++) {
        val = arr[i];
        type = typeof val;
        if (!temp[val]) {
            temp[val] = [type];
            result.push(val);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            result.push(val);
        }
    }
    return result;
}


var arr1 = [1,2,2,3,5,3,5,9];

console.log(unique(arr1)); 

var arr2 = ['a','c','e','a','c','f'];

console.log(unique(arr2));

var arr3 = [1,2,"2",2,'a','c',3,'2','e',5,3,5,'a',9,'c','f'];

console.log(unique(arr3)); 

var arr4 = [1,2,"2",2,'a','c',3,'2',{k:123},'e',5,3,5,'a',9,[1,2,3],'c','f',[1,2,3],[1,'2',3],[4,5,6],{k:123},{k:'123'},{f:234}];

console.log(unique(arr4)); 

结果为:

[1, 2, 3, 5, 9]

["a", "c", "e", "f"]

[1, 2, "2", "a", "c", 3, "e", 5, 9, "f"]

[1, 2, "2", "a", "c", 3, {k: 123}, "e", 5, 9, [1, 2, 3], "f", [4, 5, 6]]

从结果中可以发现这种方法的缺点是:当数组中的元素为对象时,当其作为键时会自动执行该对象的toString方法,也就是说对象一般会转换成键值“[object Object]”。 而数组中的元素为数组时,只要toString()后的值相同就会被认为是同一个值。

解决的方法为:在遇到数组和对象时,进行特殊处理。修正后的代码如下:

function unique(arr){
    var temp = {}, result = [], len = arr.length, val, type;
    for (var i = 0; i < len; i++) {
        val = arr[i];
        type = typeof val;
        
        if(type == "object"){
            result.push(val);
        }else if (!temp[val]) {
            temp[val] = [type];
            result.push(val);
        } else if (temp[val].indexOf(type) < 0) {
            temp[val].push(type);
            result.push(val);
        }
    }
    return result;
}

修正后就可以得到想要的结果了。 (〃'▽'〃)

五、优化遍历数组法

方法的思路为: 从数组第0项开始,每次取一个值,把它与其后面的所有元素进行对比,只取后面没有与它重复的值。

//优化遍历数组法

function unique(arr){
    var temp = [];
    var index = [];
    var l = arr.length;
    for(var i = 0; i < l; i++) {
        for(var j = i + 1; j < l; j++){
            if (arr[i] === arr[j]){
                i++;
                j = i;
            }
        }
        temp.push(arr[i]);
        index.push(i);
    }

    return temp;
}

var arr1 = [1,2,2,3,5,3,5,9];

console.log(unique(arr1)); 

var arr2 = ['a','c','e','a','c','f'];

console.log(unique(arr2));

var arr3 = [1,2,"2",2,'a','c',3,'2','e',5,3,5,'a',9,'c','f'];

console.log(unique(arr3)); 

var arr4 = [1,2,"2",2,'a','c',3,'2',{k:123},'e',5,3,5,'a',9,[1,2,3],'c','f',[1,2,3],[1,'2',3],[4,5,6],{k:123},{k:'123'},{f:234}];

console.log(unique(arr4));

得到的结果为:

[1, 2, 3, 5, 9]

["e", "a", "c", "f"]

[1, 2, "2", "e", 3, 5, "a", 9, "c", "f"]

[1, 2, "2", {k:123}, "e", 3, 5, "a", 9, [1,2,3], "c", "f", [1,2,3], [1,"2",3], [4,5,6], {k:123}, {k:"123"}, {f:234} ]

从效果来看,此方法是符合要求的。

六、 Set去重法

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。 其用于数组去重的代码如下所示:

//Set去重法

const unique = arr => [...new Set(arr)]; 


var arr1 = [1,2,2,3,5,3,5,9];

console.log(unique(arr1)); 

var arr2 = ['a','c','e','a','c','f'];

console.log(unique(arr2));

var arr3 = [1,2,"2",2,'a','c',3,'2','e',5,3,5,'a',9,'c','f'];

console.log(unique(arr3)); 

var arr4 = [1,2,"2",2,'a','c',3,'2',{k:123},'e',5,3,5,'a',9,[1,2,3],'c','f',[1,2,3],[1,'2',3],[4,5,6],{k:123},{k:'123'},{f:234}];

console.log(unique(arr4));

结果为:

[1, 2, 3, 5, 9]

["a", "c", "e", "f"]

[1, 2, "2", "a", "c", 3, "e", 5, 9, "f"]

[1, 2, "2", "a", "c", 3, {k: 123}, "e", 5, 9, [1, 2, 3], "f", [1, 2, 3], [1, "2", 3], [4, 5, 6], {k: 123}, {k: "123"}, {f: 234}]

好棒! 强大又简洁! 唯一的缺点是IE11以下的版本都不支持。 (ಥ﹏ಥ)

综上所述,简单的去重方法、数组下标法、优化遍历数组法和Set去重法适用性比较好。 排序相邻去重法和对象键值去重法容易出现问题。大家可灵活运用。

不知不觉就很晚了,该休息了~~ 解决方法有很多,欢迎大家补充!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容