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

baihe 发布于2019-08-26 10:40 / 331人阅读

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;
}

云服务器 GPU云服务器进阶篇 webrtc进阶信令篇 webrtc进阶-信令篇 js继承的几种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106572.html

数组去重的正确编写姿势

摘要：引言数组去重是前端面试的一个必备题目，其具体表现内容为怎样去掉的的重复项。一般姿势使用数组的方法可以很简单的达到目的。所以这算是委曲求全的一种中庸姿势。改编自刘春龙博客中的文章中数组去重问题引言数组去重是前端面试的一个必备题目，其具体表现内容为：怎样去掉Javascript的Array的重复项。问题简单直接，咱们也废话不多说，直入主题吧。一般姿势使用数组的indexOf()方法...

G9YH 2019-08-21 10:47 评论0 收藏0
思维导图整理大厂面试高频数组补充1: 最接近的三数之和和三数之和的两个不同之处, 力扣16

摘要：此专栏文章是对力扣上算法题目各种方法的总结和归纳整理出最重要的思路和知识重点并以思维导图形式呈现当然也会加上我对导图的详解目的是为了更方便快捷的记忆和回忆算法重点不用每次都重复看题解毕竟算法不是做了一遍就能完全记住的所 ...

longmon 2021-11-12 10:36 评论0 收藏0
也谈面试必备问题之 JavaScript 数组去重

摘要：而数组元素去重是基于运算符的。而如果有迭代函数，则计算传入迭代函数后的值，对值去重，调用方法，而该方法的核心就是调用方法，和我们上面说的方法一异曲同工。 Why underscore （觉得这部分眼熟的可以直接跳到下一段了...）最近开始看 underscore.js 源码，并将 underscore.js 源码解读放在了我的 2016 计划中。阅读一些著名框架类库的源码，就好像...

Coly 2019-08-21 10:51 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

lwx12525 2019-08-20 16:35 评论0 收藏0