前端 javascript 怎么过滤数组重复元素

通过前端JavaScript过滤数组中的重复元素能有效优化数据处理过程，并提高用户界面的交互体验。主要技术包括：使用 Set 对象、利用 filter 方法、借助 indexOf、以及 map 数据结构。其中，使用 Set 对象是一种简洁高效的方法。Set 是 ES6 新增的数据结构，类似于数组，但所有成员的值都是唯一的，无重复值。通过将数组转换为 Set 对象，自然而然地过滤掉了重复的元素，再通过 Array.from 方法或展开运算符（…）将 Set 对象转换回数组，即完成了去重操作。

一、使用 SET 对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或对象引用。要利用 Set 对象过滤数组中的重复元素，首先将数组转换为 Set 对象。因为 Set 自动移除重复的元素，转换过程本身就完成了去重。接着，用 Array.from() 或展开运算符将 Set 转换回数组格式。

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = Array.from(new Set(numbers));
// 或者使用展开运算符
// const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

这种方法简洁明了，而且在处理大型数组时尤为高效。

二、利用 FILTER 方法

filter 方法在数组的所有元素上依次执行一个由你提供的测试函数，并创建一个包含所有通过测试的元素的新数组。利用 filter 方法和 indexOf 方法结合，可以实现数组去重。

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.filter((item, index, array) => array.indexOf(item) === index);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

在这个例子里，filter 方法遍历数组 numbers，对于每个元素，利用 indexOf 方法检查该元素在数组中首次出现的位置是否与当前的位置相同。如果相同，说明之前没有出现过这个元素，因而它被添加到结果数组中。

三、借助 INDEXOF

虽然在利用 filter 方法实现去重时已经用到了 indexOf，但是单独结合循环也可以实现去重。

const numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [];
numbers.forEach((item) => {
  if (uniqueNumbers.indexOf(item) === -1) {
    uniqueNumbers.push(item);
  }
});
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

这个方法通过遍历原数组，对于每个元素，使用 indexOf 方法检查它是否已经被添加到新数组中。如果没有，就添加它。这种方法虽然简单，但是在处理大型数组时效率较低，因为 indexOf 方法每次都会遍历新数组去查找元素是否存在。

四、利用 MAP 数据结构

另一种高效的方式是使用 JavaScript 的 Map 数据结构。Map 是一个键值对的集合，但它的键可以是任何值，包括函数、对象或任意基本类型。你可以通过给每个唯一的元素分配一个键来确保元素的唯一性。

const numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [];
let uniqueMap = new Map();
numbers.forEach((item) => {
  if (!uniqueMap.has(item)) {
    uniqueMap.set(item, true);
    uniqueNumbers.push(item);
  }
});
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]