JS 数组去重的几种方法

~black-
前端领域新星创作者
2023-06-05 09:07:43

 一、前言

    在我们项目开发,我们拿到从后端请求回来的数据时,往往需要对数组进行处理,有时候我们需要将前端的数据进行去重后再发送给后端,也有可能我们拿到后端传回来的数据,需要我们去重以后再使用

二、数组去重的几种方法

1.两次for循环

实现思路:通过两次循环,外层循环每取一次值,内层循环就开始 查找是否和 外层循环的取值相同,若相同,说明有相同的值,利用 splice() 方法删除数组的这一项,循环完毕,就达到了数组去重的效果

      var arr = [1, 2, 3, 4, 1, 3]
      // 两次循环
      function unique(arr) {
        let len = arr.length
        for (let i = 0; i < len; i++) {
          for (let j = i + 1; j < len; j++) {
            if (arr[i] == arr[j]) {
              arr.splice(j, 1)
              j-- //没删除一个 少了一项
              len--
            }
          }
        }
        return arr
      }
      console.log(unique(arr))  // [1,2,3,4]

2.filter() 方法

实现思路:利用filter() 方法循环数组,然后再利用 indexOf 方法判断当前值是否是第一次出现,若第一次出现时,为true; 若不是第一次出现,为false, 而 filter 方法正好是返回结果为true的每一项,就达到了数组去重的效果。

            let arr = [1, 2, 3, 4, 5, 1, 2];
            function unique(arr) {
                return arr.filter(function (item, index) {
                    return arr.indexOf(item) === index;
                });
            }
            console.log(unique(arr)); // [1,2,3,4,5]

3.数组includes()方法

实现思路:  先创建一个新数组,然后利用循环,每一项在push之前都要先利用 includes() 方法判断该值是否在新数组中存在,若不存在,则将该值push进该数组。

            let arr = [1, 2, 3, 4, 3, 2, 1];
            function unique(arr) {
                let newArr = [];
                for (let i = 0; i < arr.length; i++) {
                    if (!newArr.includes(arr[i])) {
                        newArr.push(arr[i]);
                    }
                }
                return newArr;
            }
            console.log(unique(arr)); // [1,2,3,4]

4.数组indexOf()方法

实现思路:其实这个和 indexOf方法类似,都是通过创建新数组,只是判断新数组中是否存在该项的方法不一样。这里通过判断 newArr.indexOf(arr[i]) ===  -1 当结果为true,表示新数组中不存在该值,然后push进新数组中。

      var arr = [1, 2, 3, 3, 4, 5, 1, 2]
      function unique(arr) {
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
          if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i])
          }
        }
        return newArr
      }
      console.log(unique(arr))  // [1,2,3,4,5]

5.set去重方法

      var arr = [1, 3, 4, 5, 1, 23, 4, 5]
      // 去重
      function unique(arr) {
        // return [...new Set(arr)]
        return Array.from(new Set(arr))
      }
      console.log(unique(arr)) // [1,3,4,5,1,23]

三、总结

以上便是我知道的数组去重的几种比较常见的方法,set去重方法还是比较简单方便。

大家可以在评论区进行讨论,一起学习

...全文
成就一亿技术人!
拼手气红包 5.00元
594 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
我叫北辰 2023-06-05
  • 打赏
  • 举报
回复
互关呀

231,309

社区成员

发帖
与我相关
我的任务
社区描述
欢迎加入几何心凉的前端社区,本社区活动丰富可以拿到众多周边礼物,本社区还对接Vue技能树可以更加系统的进行学习,还为大家定期举办博主成长计划,助您赢在CSDN同时带您遨游在前端技术的海洋中!!
前端学习经验分享 个人社区 北京·丰台区
社区管理员
  • 几何心凉
  • 秃秃爱健身
  • 努力的小鳴人
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

诚挚的邀请大家加入几何心凉社区,在这里您可以结实挚友、提升技术、分享经验、成就自己

  • 【社区活动】本社区受官方长期扶持,您可以通过活动打造个人IP,让更多的人受益于您的分享,同时我们还会奉上精美周边;
  • 【赢在CSDN】社区会对社区成员开设博主扶持计划,集结优质博主分享成长经验,更是疑问在线解答,定期直播连麦,只要您是本社区成员皆可免费享受此权益,让我们携手共进助您速获万粉头衔;
  • 【Vue技能树】本社区创建人同时作为Vue技能树构建者,可为本社区开设技能树投稿通道,获得此权益后我们的高质量的文章被技能树收录获得更多曝光机会;
  • 【简历/就业指导】本社区创建者目前兼职高校就业指导,如果您是学生准备找工作或者您是职场人在应聘中遇到任何问题都可以在这里寻求帮助,我们会定期开设简历审查、面试技巧等就业方面的直播讲解;
  • 【技术交流】任何语言任何方向的技术文章我们都可以汇聚于此,大家可以摸鱼时间可以来此处提升自己,遨游在技术的海洋中;
  • 【立码吐槽】不管你是学生还是打工人,相信在生活中肯定有不断的新鲜事发生,这些事情可以是令你高兴的(比如今天过生日)可以是伤心的(比如我们丢了一个发卡)当然还会有很多,不满、发泄、求安慰等等,那么你可以在这个专栏中做出分享,求一句生日快乐、上岸顺利、加油老铁等等暖心的话;相信我们社区的伙伴看到后一定会速来吐槽;
  • 【bug记录】开发中的坑、学习中的雷,我们皆可投递于此,让更多的人借着分享精准避免从而高效开发;
  • 【更多】更多专栏正在筹备中。。。如果您是社区成员、如果您想为社区建设贡献力量,可以私聊社区管理员;

试试用AI创作助手写篇文章吧