6种数组去重的方法

1. 使用双重for循环
要比较数组中的每一个值我们都可以用双重for循环来解决,比如冒泡排序。
同样也可以使用双重for循环来数组去重。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function unique(arr) {
 
  for (let i = 0; i < arr.length; i++) {
 
    for (let j = i+1; j < arr.length; j++) {
 
      if (arr == arr[j]) {
 
        arr.splice(j,1)
 
        j--
 
      }
 
    }
 
  }
 
  return arr
 
}
 
let arr = [1,1,'true','true', 'a', 'a',true,true,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0,{},{},[],[]];
 
console.log(unique(arr)) // [ 1, 'true', 'a', false, undefined, NaN, NaN, 'NaN', {}, {} ]


可以看见NaN没有被去除掉,两个{}都没去掉,因为{}是引用值,而却我们使用的是arr == arr[j]会发生类型转换,所以以下都为true:
 

1
2
3
4
5
6
7
1 == true
 
false== []
 
undefined == null
 
false == 0




要解决以上问题我们可以使用Object.is(arr, arr[j])的方法替换arr==arr[j]既可以去除NaN还可以防止发生类型转换。
代码这里接不贴出了,大家可以自己写一下运行一下。
注:为了方便以下arr都使用该处的arr值


2. 利用indexOf()
使用indexOf(),可以判断一个数组中是否包含某个值,如果存在则返回该元素在数组中的位置,如果不存在则返回-1。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
functon unique(arr) {
 
    let res = []
 
          for (let i = 0; i < arr.length; i++) {
 
        if (res.indexOf(arr) === -1) {
 
                  res.push(arr)
 
        }
 
          }
 
          return res
 
}
 
console.log(unique(arr)) //[ 1,   'true',   'a',   true,   false,   undefined,   null,   NaN,   NaN,   'NaN',   0,   {},   {}, [], []]


这里我们新建一个数组来保存去重后的数组,如果该数组不包含元素就将该元素push到该数组中,可以发现这种方法任然没有去掉NaN、{}、[]。


3. 利用includes()
使用includes()方法也可以判断数组是否包含某个特定的元素,如果包含就返回true不包含就返回false。
这和indexOf()方法有些类似,所以我们使用includes()进行数组去重和indexOf()的方法原理是一样的。

1
2
3
4
5
6
7
8
9
functon unique(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.includes(arr)) {
                  res.push(arr)
        }
    }
    return res
}



4. 利用filter()
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

并且filter()不会改变数组,也不会对空数组进行检测。filter()方法接收一个回调函数。
语法:

1
array.filter(function(item,index,arr), thisValue)


 

参数描述
item必须。当前元素的值
index可选。当前元素的索引值
arr可选。当前元素属于的数组对象


代码实现

1
2
3
4
5
6
function unique(arr) {
    return arr.filter((item,index, arr) => {
        return arr.indexOf(item) === index
    })
}
console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, 'NaN', 0, {}, {}, [], [] ]




这里我们用判断indexOf(item)判断当前元素的索引是否等于当前index,如果相等就返回该元素。

5. 使用对象的特点
对象是一种以键值对存储信息的结构,并且不能有重复的键。

01
02
03
04
05
06
07
08
09
10
11
12
function unique(arr) {
  let obj = {}
  for (let i = 0; i < arr.length; i++) {
    if (arr in obj) {
      obj[arr] ++
    } else {
      obj[arr] = 10
    }
  }
  return Object.keys(obj) // 以数组的形式返回键
}
console.log(unique(arr)) // [ '0',   '1',   'true',   'a',   'false',   'undefined',   'null',   'NaN',   '[object Object]',   '']




这种方法的写出来有点问题,因为是用Object.keys(obj)来返回键的集合所以得到的都是字符串的形式。


6. 使用set
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

1
2
3
4
function unique(arr) {
  return [...new Set(arr)]
}
console.log(unique(arr)) //[ 1,   'true',   'a',   true,   false,   undefined,   null,   NaN,   'NaN',   0,   {},   {},   [],   [] ]


这是ES6最常用的方法,得到的效果也还不错。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值