编辑
2024-07-23
前端
00
请注意,本文编写于 120 天前,最后修改于 120 天前,其中某些信息可能已经过时。

目录

使用原生 JavaScript 方法
1. filter() 方法配合 indexOf()
2. reduce() 方法
利用 ES6 新特性
1. 使用扩展运算符与解构赋值
2. 利用 Map 数据结构

数组去重,是我们日常工作中常见问题之一,即从一个数组中移除所有重复的元素,确保每个元素只出现一次,是这一类问题的核心。

使用原生 JavaScript 方法

1. filter() 方法配合 indexOf()

js
const uniqueArray = array.filter((item, index, self) => { return self.indexOf(item) === index; });

该方法利用 filter() 遍历数组,对于每个元素,通过 indexOf() 查找其在原数组中的第一个索引。如果当前元素的索引与正在遍历的索引相同,说明这是该元素在数组中的首次出现,保留该元素;否则,忽略该元素。

2. reduce() 方法

js
const uniqueArray = array.reduce((acc, current) => { return acc.includes(current) ? acc : [...acc, current]; }, []);

这里使用 reduce() 函数将数组累积到一个新的数组(acc)中。在每次迭代中,检查当前元素是否已存在于累积数组中。若不存在,则将其添加至累积数组;否则,跳过该元素。

利用 ES6 新特性

1. 使用扩展运算符与解构赋值

js
const uniqueArray = [...new Set(array)];

这种方法简洁高效,利用 ES6 的 Set 数据结构自动去除重复元素的特性,再通过扩展运算符将 Set 转换回数组。Set 是一种特殊的集合,不允许重复元素存在,因此插入过程会自动过滤重复项。

2. 利用 Map 数据结构

js
const uniqueArray = Array.from(new Map(array.map(item => [item, item])).values());

尽管不如直接使用 Set 直观,但此方法同样有效。它首先将数组映射为键值对相同的 Map,由于 Map 键的唯一性,重复的数组元素会被自动忽略。然后通过 Array.from() 和 Map.values() 将 Map 的值(即无重复元素)转换回数组。

本文作者:小白菜

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!