数组去重的几种方式

Posted 2023-03-02 前端精髓

数组去重有很多种方式，最常用的就是使用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对象的构造函数，将我们想要从中构造集合的数组传递给它。然后，一旦我们删除了所有重复项并将剩余值存储在我们的集合中，我们将转换回一个数组并返回结果。