[js][实战][去重][总结] - 运用es6优化js数组去重及几种去重常用方法

原文出自本人博客:
js去重的几种常用方法

博主博客--兼乎

总结在前

对于性能:
速度最快的是:对象键值对法去重(空间换时间<^^>)
最常规的是:使用indexof去重,注意ie8以下的兼容写法
最土的是:使用双重循环逐个遍历
推荐的是:es6优化去重
至于其他优质算法去重这里不谈,我们可以相互讨论,你邮件我你的思路,谢谢。

在项目中进行array去重常用有一下几种方法。

1.使用for循环法

思路:
1.构建一个新的数组存放结果
2.for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组对比
3.若结果数组中没有该元素,则存到结果数组中

/*
 * An Array of relevant
 * use for loop
 * */
Array.prototype.arrUnique_for = function () {
    let res = [this[0]];
    let flag = false;
    for (let i = 1; i < this.length; i++) {
        for (let j = 0; j < res.length; j++) {
            if (this[i] === res[j]) {
                flag = true;
                break;
            }
        }
        if (!flag) {
            res.push(this[i]);
        }
        flag = false;
    }
    return res;
}

2.使用数组排列后对比法

思路:
1.先将原数组进行排序
2.检查原数组中的第i个元素 与 结果数组中的最后一个元素是否相同,因为已经排序,所以重复元素会在相邻位置
3.如果不相同,则将该元素存入结果数组中

局限性:通过sort排序后,去重返回的结果也是排序后的

/*
 *  An array of relevant
 *  use array sort and judge
 *
 * */
Array.prototype.arrUnique_sort = function () {
    this.sort();
    let res = [this[0]];
    for (let i = 1; i < this.length; i++) {
        if (this[i] !== res[res.length - 1]) {
            res.push(this[i]);
        }
    }
    return res;
}

3.对象键值对法

思路:
1.创建一个新的数组存放结果
2.创建一个空对象
3.for循环时,每次取出一个元素值作为对象的一个属性与对象进行对比并赋值为1再存入到第2步建立的对象中,如果这个元素不重复,则把它存放到结果数组中。
说明:至于如何对比,就是每次从原数组中取出一个元素,然后到对象中去访问这个属性,如果能访问到值,则说明重复。

局限性:空间换时间
优点:速度快

/*
 *  An array of relevant
 *  create a new array and create a new object ,compare then
 *
 * */

Array.prototype.arrUnique_aco = function () {
    let res = [];
    let json = {};
    for (let i = 0; i < this.length; i++) {
        if (!json[this[i]]) {
            res.push(this[i]);
            json[this[i]] = 1;
        }
    }
    return res;
}

4.使用indeof

局限性:判断值是否在数组的方法“indexOf”是ECMAScript5 方法,IE8以下不支持,需多写一些兼容低版本浏览器代码

4.1历遍数组法
思路:
1.新建一新数组
2.遍历传入数组,值不在新数组就加入该新数组中

/*
 *  An array of relevant
 *  use indexOf iterate
 *
 * */

Array.prototype.arrUnique_indexof = function () {
    let res = [];
    for (let i = 0; i < this.length; i++) {
        if (res.indexOf(this[i]) === -1) res.push(this[i]);
    }
    return res;

}

4.2.数组下标判断法
思路:
1.如果当前数组的第i项在当前数组中第一次出现的位置不是i,那么表示第i项是重复的,忽略掉。否则存入结果数组。

/*
 *  An array of relevant
 *  use indexOf iterate,if res index == i
 *
 * */

Array.prototype.arrUnique_indexof_index = function () {
    let res = [this[0]];
    for (let i = 1; i < this.length; i++) {
        if (this.indexOf(this[i]) === i) {
            res.push(this[i]);
        }
    }
    return res;
}

4.3兼容性:兼容ie8一下浏览器写法。只需要在最开始加入兼容函数就ok,如下:

/*
* indexOf兼容
* */
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function (val) {
        let res = -1, len = this.length;
        if (len === 0) {
            return res;
        }
        for (let i = 0; i < len; i++) {
            if (this[i] === val) {
                res = i;
                break;
            }
        }
        return res;
    }
}
Array.prototype.arrUnique_indexof = function () {
    let res = [];
    for (let i = 0; i < this.length; i++) {
        if (res.indexOf(this[i]) === -1) res.push(this[i]);
    }
    return res;

}

5.优化历遍数组法

思路:
1.获取没重复的最右一值放入新数组。
2.检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断

/*
 *  An array of relevant
 *  优化遍历数组法
 *
 * */

Array.prototype.arrUnique_optimize = function () {
    let res = [], len = this.length;
    for (let i = 0; i < len; i++) {
        for (let j = i + 1; j < len; j++) {
            if (this[i] === this[j]) j = ++i;
        }
        res.push(this[i])
    }
    return res;
}

6.使用es6特性来数组去重

思路:
1.使用set的数据结构构造数组。
建议:推荐

/*
let arr = [1,2,3,4,5,5,5,5]
// arr.length => 8
let single = new Set( arr );
// single = [1,2,3,4,5]
// single.length => 5
//这是使用Set()的唯一特性去重
}

代码以上传到github:https://github.com/liejiayong/somethingElse/blob/master/Tools-template/array-unique-.js
欢迎来怼,喜欢的给个star,谢谢!

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

推荐阅读更多精彩内容