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内部,而进入下一次外层开始的循环。这样循环往复,最后也达到了去重的效果。

posted @   silentmuh  阅读(35274)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
Live2D
欢迎阅读『js数组去重五种方法』
  1. 1 Walk Thru Fire Vicetone
  2. 2 爱你 王心凌
  3. 3 Inspire Capo Productions - Serenity
  4. 4 Welcome Home Radical Face
  5. 5 粉红色的回忆 李玲玉
Welcome Home - Radical Face
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

作词 : Ben P. Cooper

作曲 : Cooper

Sleep don't visit, so I choke on sun

And the days blur into one

And the backs of my eyes hum with things I've never done

Sheets are swaying from an old clothesline

Was never much but we've made the most

Welcome home

Ships are launching from my chest

Some have names but most do not

If you find one,please let me know what piece I've lost

Heal the scars from off my back

I don't need them anymore

You can throw them out or keep them in your mason jars

I've come home

All my nightmares escaped my head

Bar the door, please don't let them in

You were never supposed to leave

Now my head's splitting at the seams

And I don't know if I can

Here, beneath my lungs

I feel your thumbs press into my skin again

点击右上角即可分享
微信分享提示