怎样在 JavaScript 数组中移除重复元素

在 JavaScript 编程中，处理数组时移除重复元素是一个常见需求。本文将介绍几种有效移除数组重复元素的方法，帮助提升代码效率和质量。

使用 Set 数据结构

ES6 引入的 Set 数据结构是移除数组重复元素的便捷方式。Set 中的元素是唯一的，这一特性使得它天然适合解决重复问题。示例代码如下：

const originalArray = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(originalArray));
console.log(uniqueArray); 

首先创建一个 Set，将数组元素作为参数传入 Set 构造函数，Set 会自动过滤掉重复元素。然后使用 Array.from() 方法将 Set 转换回数组。这种方法简洁高效，代码可读性强。

使用 filter 方法和 indexOf

filter() 方法可以创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。结合 indexOf() 方法，我们可以实现移除重复元素的功能。代码如下：

function removeDuplicates(arr) {
    return arr.filter((element, index, self) => {
        return self.indexOf(element) === index;
    });
}
const array = [1, 3, 3, 5, 7, 7, 9];
const result = removeDuplicates(array);
console.log(result); 

filter() 方法会遍历数组，indexOf() 方法返回元素在数组中第一次出现的位置。如果当前元素的索引等于它在数组中第一次出现的索引，说明它是第一次出现，将其保留在新数组中。

使用 reduce 方法

reduce() 方法对数组中的每个元素按序执行一个提供的累加器函数，该函数返回的累积值是下一次调用该函数时的第一个参数。示例如下：

function unique(arr) {
    return arr.reduce((acc, current) => {
        return acc.includes(current)? acc : [...acc, current];
    }, []);
}
const numbers = [2, 4, 4, 6, 8, 8, 10];
const uniqueNumbers = unique(numbers);
console.log(uniqueNumbers); 

reduce() 方法从一个空数组开始，遍历原数组。如果累加器数组中已经包含当前元素，则直接返回累加器；否则，将当前元素添加到累加器数组中。

在实际应用中，根据数组的大小和性能需求，可以选择合适的方法移除 JavaScript 数组中的重复元素。熟练掌握这些方法，能够让我们在处理数组数据时更加得心应手。