超全的数组去重12种方法_数组去重方法-程序员宅基地

技术标签: 前端  

前言

数组去重,可以说是一个比较常见的面试题,今天来盘点一下都有哪些方法可以实现数组去重。

方法1、双重for循环

这是一个最笨的方法,双重循环。

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法1: 双重for 循环
    function newArrFn (arr) {
    
      // 创建一个新的空数组
      let newArr = []
      for(let i = 0;i<arr.length;i++){
    
        // 设置一个开关,如果是true,就存进去,不是就不存
        let  flag = true
        for(let j = 0;j<newArr.length;j++){
    
          // 原数组和新数组作比较,如果一致,开关变为 false
          arr[i] === newArr[j] ? flag = false : flag
        };
        flag ? newArr.push(arr[i]) : newArr
      };
      return newArr
    }
    console.log(newArrFn(arr));

方法2、for循环 +findIndex

主要利用findIndex 的特性,查找元素找不到返回-1, 接下来就需要判断,如果是-1,说明没找到,就往新数组里面添加元素。

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法2: for + indexof
    function newArrFn (arr) {
    
      let newArr = []
      for(let i = 0;i<arr.length;i++){
    
        newArr.indexOf(arr[i]) === -1 ? newArr.push(arr[i]) : newArr
      };
      return newArr
    }
    console.log(newArrFn(arr));

方法3、sort 排序

首先利用 sort 方法进行排序。进行循环,如果原数组的第 i 项和新数组的i - 1 项不一致,就push进去。

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法3: for + sort
    function newArrFn (arr) {
    
      arr = arr.sort()
      let newArr = []
      for(let i = 0;i<arr.length;i++){
    
        arr[i] === arr[i-1] ? newArr : newArr.push(arr[i])
      };
      return newArr
    }
    console.log(newArrFn(arr));

方法4、Set

ES6中新增了数据类型Set,Set的一个最大的特点就是数据不重复。Set函数可以接受一个数组(或类数组对象)作为参数来初始化,利用该特性也能做到给数组去重。

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法4: set
    function newArrFn (arr) {
    
      // .new Set方法,返回是一个类数组,需要结合 ...运算符,转成真实数组
      return ([...new Set(arr)])
    }
    console.log(newArrFn(arr));

方法5、set + Array.from

利用 set数据不重复的特点,结合 Array.from

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法5: set + Array.from
    function newArrFn (arr) {
    
      // .new Set方法,返回是一个类数组,需要结合 Array.from ,转成真实数组
      return (Array.from(new Set(arr)) )
    }
    console.log(newArrFn(arr));

方法6、filter + indexOf

indexOf,可以检测某一个元素在数组中出现的位置,找到返回该元素的下标,没找到返回 -1

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法6 :filter + findIndex
    function newArrFn (arr) {
    
      // 利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等,
      // 如果相等,说明数组中没有重复的
      return Array.prototype.filter.call(arr, function (item, index) {
     
        return arr.indexOf(item) === index
       })
    }
    console.log(newArrFn(arr));

方法7、includes

利用 includes 检查新数组是否包含原数组的每一项。 如果不包含,就push进去

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法7 :for + includes
    function newArrFn (arr) {
    
      // 利用includes 检查新数组是否包含原数组的每一项
      // 如果不包含,就push进去
      let newArr = []
      for(let i = 0;i<arr.length;i++){
    
        newArr.includes(arr[i]) ? newArr:  newArr.push(arr[i]) 
      };
      return newArr
    }
    console.log(newArrFn(arr));

方法 8、 for + object

利用对象属性名不能重复这一特点。如果对象中不存在,就可以给 push 进去

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法8 :for + obj
    function newArrFn (arr) {
    
      // 利用对象属性名不能重复这一特点
      // 如果对象中不存在,就可以给 push 进去
      let newArr = []
      let obj = {
    }
      for(let i = 0;i<arr.length;i++){
    
        if (!obj[arr[i]]) {
    
          newArr.push(arr[i])
          obj[arr[i]] = 1
        } else {
    
          obj[arr[i]] ++
        }
      };
      return newArr
    }
    console.log(newArrFn(arr));

方法9、for + splice

利用 splice 进行切割

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法8 :for + splice
    // 利用 splice 进行切割。
    function newArrFn (arr) {
    
      for(let i = 0; i<arr.length; i++){
    
        for(let j = i + 1; j<arr.length; j++){
    
          if (arr[i] === arr[j]) {
    
            arr.splice(j,1);
            j--
          }
        };
        }
        return arr
    }
    console.log(newArrFn(arr));

方法10、filter + indexOf

利用 filter 过滤 配合 indexOf 查找元素

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法10 :filter + indexOf
    // filter 过滤 配合 indexOf 查找元素
    function newArrFn (arr) {
    
      return arr.filter((item, index) => {
    
        return arr.indexOf(item) === index
      })
    }
    console.log(newArrFn(arr));

方法11、Map

利用数据结构存值的特点

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法11 :Map
    function newArrFn (arr) {
    
      let newArr = []
      let map = new Map()
      for(let i = 0;i<arr.length;i++){
    
        // 如果 map里面不包含,就设置进去
        if (!map.has(arr[i])) {
    
          map.set(arr[i], true)
          newArr.push(arr[i])
        }
      };
      return newArr
    }
    console.log(newArrFn(arr));

方法12:reduce

var arr = [1, 2, 3,4 ,5,6, 4, 3, 8, 1]
    // 数组去重:
    // 方法12 :reduce
    function newArrFn (arr) {
    
      let newArr = []
      return  arr.reduce((prev, next,index, arr) => {
    
        // 如果包含,就返回原数据,不包含,就把新数据追加进去 
        return newArr.includes(next) ? newArr :  newArr.push(next)
      }, 0)
    }
    console.log(newArrFn(arr));
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_64564920/article/details/124206003

智能推荐

bind mysql web_基于的django的bind dns管理平台-程序员宅基地

文章浏览阅读422次。BIND(Berkeley internet Name Daemon)也叫做NAMED,是现今互联网上使用最为广泛的DNS 服务器程序,本项目旨在更简单的维护我们内部的dns系统。环境:数据库: mysql5.6应用: bind-9.11.2环境: python3.8 , django30x01 安装数据库bash sql 建库语句use mysqlcreate database bind9; -..._使用web管理bind

Jvm基础篇-02-自动内存管理-程序员宅基地

文章浏览阅读282次。对于Java程序员来说,在虚拟机自动内存管理机制的帮助下,不再需要为每一个new操作去写配对的delete/free代码,不容易出现内存泄漏和内存溢出问题。不过,一旦出现内存泄漏和溢出方面的问题,如果不了解虚拟机是怎样使用内存的,那排查错误、修正问题将会成为一项异常艰难的工作。====从新生代出发-XX:+UseSerialGC 可互相激活新生代 :Serial + 老年代: Serial Old 都是串行-XX:+UseParNewGC 可互相激活。_自动内存管理

自己写的轮播图,原生JavaScript,支持移动端触摸滑动。分页器圆点可以支持mouseover鼠标移入和click点击,面向对象思路_轮播图无缝链接带有小圆点且支持移动端触频滑动-程序员宅基地

文章浏览阅读529次。自己用原生javascript写的轮播图,分页器按钮Click点击与mouseover鼠标悬浮导航都支持。同时支持移动端触摸操作,自己写得感觉不足之处是图片滚动动画还不够平滑,再改改间隔与偏移量应该可以。函数接受参数应该改成对象更好,还没有改。感觉这次写的轮播图功能比较全面了哈。高手们请别笑话,不足请指正.上源码:先HTML:&lt;!DOCTYPE html&gt;&lt;html&gt;&..._轮播图无缝链接带有小圆点且支持移动端触频滑动

LAMP服务架构之传统缓存机制(Ngins+PHP+Memcache)-程序员宅基地

文章浏览阅读339次。nginx - fastcgi - php - memcache 协同下的 请求的完整访问过程用户发送http请求报文给nginx服务器nginx会根据文件url和后缀来判断请求如果请求的是静态内容,nginx会将结果直接返回给用户; 如果请求的是动态内容,nginx会将请求交给 fastcgi客户端 ,通过 fastcgi_pass 将这个请求发送给 php-fpmphp-fpm 会将请求交给 wrapperwrapper 收到请求会生成新的线程调用 php动态程序解析服务器如果用

源码分析Skynet的Actor对等调度:理解不一样的任务调度机制_actor公平调度-程序员宅基地

文章浏览阅读566次。一、actor对等调度。二、调度流程源码分析:thread_worker()、struct skynet_context、skynet_context_message_dispatch()、dispatch_message()。三、c语言到lua的调用过程分析。_actor公平调度

全方面了解接口自动化,看完还不会你锤我-程序员宅基地

文章浏览阅读2.4w次,点赞222次,收藏1.1k次。一、自动化分类(1)接口自动化python/java+requests+unittest框架来实现 python/java+RF(RobotFramework)框架来实现——对于编程要求不高(2)Web UI功能自动化python/java+selenium+unittest+ddt+PO框架来实现 python/java+RFS(RobotFrameWork+Selenium)框架来实现——对于编程要求不高(3)App自动化python/java+appnium+unit_接口自动化

随便推点

无法注册 URL http://+:8735/Service/。另一应用程序已使用 HTTP.SYS 注册了该 URL。的解决办法。_无法注册应用去处理url地址-程序员宅基地

文章浏览阅读1.1w次。 弄了一上午,终于把使用NetTcpBinding的双工通讯给弄清楚了,也算是对wcf有所掌握了,为了解决穿透防火墙的问题,所以决定尝试一下WsDualHttpBinding的双工通信,结果问题来了。。。 “无法注册 URL http://+:8735/Service/。另一应用程序已使用 HTTP.SYS 注册了该 URL。” 晕了一种个下午,百_无法注册应用去处理url地址

Python学习资料全面总结,真的对零基础很有用-程序员宅基地

文章浏览阅读4.5k次,点赞5次,收藏52次。把手里积累了这么久的Python入门资料整理了一下,发现其实,有了这些,python入门真的不难,每天花点时间学,真的不会影响工作。下面一起来看看这些资料吧!可以学习python的地方 Python学习资料全部整理 Python可以做的事情 关于python的一些文章一、可以学习Python的地方1、实验楼:【Python基础+项目实战课程】https://www.lanqiao.cn/courses/13302、《笨办法学 Python》:这本书绝对是最简单的学习 Pyth.._python学习资料

Linux Centos yum/rpm 设置代理_linux 代理 rpm-程序员宅基地

文章浏览阅读1.2k次。yum 设置代理:vim /etc/yum.conf添加形如:proxy = http://user:pass@ip:portrpm 设置代理sudo rpm -Uvh https://xxxxx.rpm --httpproxy ip --httpport portreference: https://www.lightnetics.com/topic/3698/how-do-i-install-an-rpm-package-using-a-http-proxy..._linux 代理 rpm

Android中的图片处理(包括缓存、大小、优化等)_android 每秒收到30张图片怎么处理-程序员宅基地

文章浏览阅读3.1k次。加载一副位图到你的用户界面是很简单的,然而如果你需要马上加载一组更大的图片的话就会复杂的多.在许多情况下(例如有些组件像ListView,GridView以及ViewPager等),出现在屏幕上的图片总量,其中包括可能马上要滚动显示在屏幕上的那些图片,实际上是无限的. 那些通过回收即将移除屏幕的子视图的组件,内存使用得以保留.如果你不长期保持你对象的引用的话,垃圾收集器也会释放你所加载的位图内_android 每秒收到30张图片怎么处理

摄像头的RTSP视频如何用H5 来播放_h5直接播放rtsp视频-程序员宅基地

文章浏览阅读205次。我们公司开发的liveweb播放器是可支持H.264/H.265视频播放的流媒体播放器,性能稳定、播放流畅,可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等,具备较高的可用性。支持h264、h265、AAC、G711等常见音视频格式。支持协议:RTSP、RTMP、HLS、HTTP-FLV、WebSocket-FLV、GB28181、HTTP-TS、WebSocket-TS、HTTP-fMP4、WebSocket-fMP4、MP4、WebRTC。对外提供HTTP API二次开发接口;_h5直接播放rtsp视频

游标_java游标查询。前面的查询会释放吗-程序员宅基地

文章浏览阅读640次。使用select语句可以返回一个结果集,而如果需要对结果集中单独的行进行操作,则需要使用游标。优点: 在数据库中,游标是一个十分重要的概念。游标提供了一种对从表中检索出的数据进行操作的灵活手段,就本质而言,游标实际上是一种能从包括多条数据记录的结果集中每次提取一条记录的机制。游标总是与一条SQL 查询语句相关联因为游标由结果集(可以是零条、一条或由相关的选择语句检索出的多条记录)和结果集中指向特定_java游标查询。前面的查询会释放吗

推荐文章

热门文章

相关标签