数组去重有很多种方式,最常用的就是使用Set进行去重,除了这种方式你还能想到其他的吗?今天就让我们一起聊聊关于数组去重的几种方式。

1、filter()和indexOf()实现去重

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = originalArray.filter((item, index, array) => {
  return array.indexOf(item) === index
})

// uniqueArray === [1, 2, 3, 4]

这里的基本策略是遍历originalArray并检查我们当前检查的项的索引是否与originalArray中的项的索引相同。

因为indexOf返回它为给定值找到的第一个索引,如果它不是重复值,那么该项的索引必须相同!

2、reduce()和includes()实现去重

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = originalArray.reduce((unique, item) => {
  unique.includes(item) ? unique : [...unique, item]
}, [])

// uniqueArray === [1, 2, 3, 4]

这里的策略是在reducer函数的“累加器”中保存一个唯一项的运行列表。对于原始列表中的每个项目,我们检查累加器是否包括正在考虑的项目。

如果它确实包含该项,则返回累加器而不做任何更改,实际上是“跳过”该项。

如果它不包含该项,请将累加器中的值分散到一个新数组中,然后添加正在考虑的项。

includes返回一个布尔值——如果在数组中找到该值,则返回true;否则返回false。这个布尔值驱动我们的条件,决定如何处理每个值。

我发现这种方法不那么直观,也更难理解,但它很管用。

还要注意reducer函数之后传入的空数组是累加器的起始值,因此第一次通过reduce,unique是一个空数组。

3、Set实现去重

let originalArray = [1, 2, 3, 4, 1, 2, 3, 4]

let uniqueArray = array => [...new Set(array)]

// or

let uniqueArray = Array.from(new Set(originalArray))

// uniqueArray = [1, 2, 3, 4]

这种方法利用了在ES6中引入的Set对象的能力。

集合保证保留插入项的顺序,并且只包含唯一值。因此,根据定义,集合不可能包含重复项!

这里我们调用Set对象的构造函数,将我们想要从中构造集合的数组传递给它。然后,一旦我们删除了所有重复项并将剩余值存储在我们的集合中,我们将转换回一个数组并返回结果。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐