专栏首页前端知识分享js数组去重五种方法

js数组去重五种方法

今天来聊一聊JS数组去重的一些方法,包括一些网上看到的和自己总结的,总共5种方法(ES5)。

第一种:遍历数组法

这种方法最简单最直观,也最容易理解,代码如下:

1  var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
2   var newArr = []
3   for (var i = 0; i < arr.length; i++) {
4     if (newArr.indexOf(arr[i]) === -1) {
5       newArr.push(arr[i])
6     }
7   }
8   console.log(newArr) // 结果:[2, 8, 5, 0, 6, 7]

这种方法很好理解,利用了indexOf()方法(indexOf()方法如果查询到则返回查询到的第一个结果在数组中的索引,如果查询不到则返回-1)。先创建一个新的空数组用来存储新的去重的数组,然后遍历arr数组,在遍历过程中,分别判断newArr数组里面是不是有遍历到的arr中的元素,如果没有,直接添加进newArr中,如果已经有了(重复),那么不操作,那么从头到尾遍历一遍,正好达到了去重的目的。

第二种:数组下标判断法

这种方法也比较好理解,代码如下:

1 var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
2   var newArr = []
3   for (var i = 0; i < arr.length; i++) {
4     if (arr.indexOf(arr[i]) === i) {
5       newArr.push(arr[i])
6     }
7   }
8   console.log(newArr) // 结果:[2, 8, 5, 0, 6, 7]

这和第一种方法有重叠,不说多余的,直接看if这里,在遍历arr的过程中,如果在arr数组里面找当前的值,返回的索引等于当前的循环里面的i的话,那么证明这个值是第一次出现,所以推入到新数组里面,如果后面又遍历到了一个出现过的值,那也不会返回它的索引,indexof()方法只返回找到的第一个值的索引,所以重复的都会被pass掉,只出现一次的值都被存入新数组中,也达到了去重的目的。

第三种:排序后相邻去除法

这种方法用到了sort()方法,代码如下:

1 var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
2   arr.sort()
3   var newArr = [arr[0]]
4   for (var i = 1; i < arr.length; i++) {
5     if (arr[i] !== newArr[newArr.length - 1]) {
6       newArr.push(arr[i])
7     }
8   }
9   console.log(newArr) // 结果:[0, 2, 5, 6, 7, 8]

这种方法的思路是:先用sort()方法把arr排序,那么排完序后,相同的一定是挨在一起的,把它去掉就好了,首先给新数组初始化一个arr[0],因为我们要用它和arr数组进行比较,所以,for循环里面i也是从1开始了,我们让遍历到的arr中的值和新数组最后一位进行比较,如果相等,则pass掉,不相等的,push进来,因为数组重新排序了,重复的都挨在一起,那么这就保证了重复的这几个值只有第一个会被push进来,其余的都和新数组的被push进来的这个元素相等,会被pass掉,也达到了去重的效果。

第四种:优化的遍历数组法

 1  var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2, 8]
 2   var newArr = []
 3   for (var i = 0; i < arr.length; i++) {
 4     for (var j = i + 1; j < arr.length; j++) {
 5       if (arr[i] === arr[j]) {
 6         i++
 7         j = i
 8       }
 9     }
10     newArr.push(arr[i])
11   }
12   console.log(newArr) // 结果:[0, 5, 6, 7, 2, 8]

思路:两层for循环,外面一层是控制遍历到的前一个arr中的元素,里面一层控制的是第一层访问到的元素后面的元素,不断的从第0个开始,让第0个和他后面的元素比较,如果没有和这个元素相等的,则证明没有重复,推入到新数组中存储起来,如果有和这个元素相等的,则pass掉它,直接进入下一次循环。从第1个开始,继续和它后面的元素进行比较,同上进行,一直循环到最后就是:不重复的都被推入新数组里面了,而重复的前面的元素被pass掉了,只留下了最后面的一个元素,这个时候也就不重复了,则推入新数组,过滤掉了所有重复的元素,达到了去重的目的。

第五种:数组遍历法

 1 var arr = ['a', 'a', 'b', 'c', 'b', 'd', 'e', 'a']
 2   var newArr = []
 3   for (var i = 0; i < arr.length; i++) {
 4     var bl = true
 5     for (var j = 0; j < newArr.length; j++) {
 6       if (arr[i] === newArr[j]) {
 7         bl = false
 8         break
 9       }
10     }
11     if (bl) {
12       newArr.push(arr[i])
13     }
14   }
15   console.log(newArr) // 结果:["a", "b", "c", "d", "e"]

思路:也是两层for循环,外层for循环控制的是arr数组的遍历,内层for循环控制的是新数组的遍历,从第0位开始,如果新数组中没有这个arr数组中遍历到的这个元素,那么状态变量bl的值还是true,那么自然进入到了if中把这个值推入到新数组中,如果有这个元素,那么代表重复,则把状态变量bl取值改为false,并且跳出当前循环,不会进入到if内部,而进入下一次外层开始的循环。这样循环往复,最后也达到了去重的效果。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第29天:js-数组添加删除、数组和字符串相互转换

    一、添加数组 var arr=[1,3,5]; arr.push(7,9);//添加7和9到数组arr后面,得到[1,3,5,7,9] 1、push();可向数...

    半指温柔乐
  • js数组常用方法总结

    最近工作中经常用到数组操作,每次都傻傻不知道怎么用,今天有时间整理了一下,希望对大家有帮助!这些基础的知识,要熟记于心。

    半指温柔乐
  • 第124天:移动web端-Bootstrap轮播图插件使用

    > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整

    半指温柔乐
  • JavaScript 数组常用方法介绍

    当要使用迭代方法时,forEach 应该是最后被考虑的。主要原因是:forEach 与其他迭代方法比,语义性是最差的。更详细的说明见 avoid forEach...

    Joel
  • 动态规划(二):0-1背包

    代码中存在两层循环,以二维数组的形式记录中间数据,分别记录不同物品个数在各个空间大小下的最大价值。循环内部存在两种判断,分别用于判断空间大小

    zhipingChen
  • 2 :基本语法

    六月的雨
  • PHP入门之数组

    之前几篇文章分别介绍了PHP的运算符,流程控制,函数。有兴趣的可以去看看。 PHP入门之类型与运算符 PHP入门之流程控制 PHP入门之函数 接下来简单...

    雪痕@
  • JavaScript:Array

    1. 原数组不变,返回新数组 concat(value/array) 连接两个或更多的数组,并返回结果。

    奋飛
  • 浙大版《C语言程序设计(第3版)》题目集 练习7-3 将数组中的数逆序存放

    本题要求编写程序,将给定的n个整数存入数组中,将数组中的这n个数逆序存放,再按顺序输出数组中的元素。

    C you again 的博客
  • ES6常用数组方法

    有时候我们需要清空数组,一个快捷的方法就是直接让数组的 length 属性为 0,就可以清空数组了。

    何处锦绣不灰堆

扫码关注云+社区

领取腾讯云代金券