四种JS数组去重方法大全，满足你的各种需求

2024-02-10 05:10:55

揭秘 JavaScript 数组去重的四种方法

JavaScript 数组是一种强大的数据结构，允许您存储和操作各种类型的数据。然而，数组的一个缺点是它允许重复元素。在某些情况下，您可能需要删除这些重复项以进行更准确的数据分析或处理。

本文将探讨四种在 JavaScript 中对数组进行去重的常见方法。我们将深入了解每种方法的优缺点，并提供代码示例以帮助您理解实现过程。

1. 使用 ES6 Set

ES6 Set 是一个集合数据结构，可以有效地存储唯一值。您可以利用这一点通过将数组转换为 Set，然后将其转换回数组来消除重复项。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const set = new Set(arr);
const uniqueArr = [...set];

console.log(uniqueArr); // [1, 2, 3, 4, 5]

优点：

简洁的语法
高效，尤其适用于大量数组

缺点：

仅适用于数组元素类型相同的情况

2. 使用 filter 方法

filter 方法允许您根据指定的条件过滤数组元素。您可以利用这一点通过定义一个回调函数来过滤重复的元素。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArr = arr.filter((item, index, arr) => {
  return arr.indexOf(item) === index;
});

console.log(uniqueArr); // [1, 2, 3, 4, 5]

优点：

灵活，可根据自定义条件进行过滤

缺点：

效率较低，尤其适用于大型数组

3. 使用 indexOf 方法

indexOf 方法返回数组元素第一次出现的位置。您可以利用这一点通过遍历数组并检查每个元素在数组中的位置是否与当前索引相同来删除重复项。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];

for (let i = 0; i < arr.length; i++) {
  if (arr.indexOf(arr[i]) === i) {
    uniqueArr.push(arr[i]);
  }
}

console.log(uniqueArr); // [1, 2, 3, 4, 5]

优点：

效率高于 filter 方法

缺点：

复杂性较高
效率仍然不如 Set 或 reduce 方法

4. 使用 reduce 方法

reduce 方法允许您将数组的所有元素聚合为一个单一值。您可以利用这一点通过使用一个 akumulator来收集唯一元素，并将结果返回为一个数组。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArr = arr.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);

console.log(uniqueArr); // [1, 2, 3, 4, 5]

优点：

效率高，尤其适用于大型数组
代码简洁

缺点：

相对复杂的语法

结论

在 JavaScript 中对数组进行去重有许多方法，每种方法都有其优缺点。根据您的具体需求和数组特性，选择最合适的方法至关重要。

为了更清晰地了解每种方法，以下是一个总结表：

方法	优点	缺点
ES6 Set	简洁的语法，高效	仅适用于数组元素类型相同的情况
filter 方法	灵活，可根据自定义条件进行过滤	效率较低
indexOf 方法	效率高于 filter 方法	复杂性较高，效率仍然不如 Set 或 reduce 方法
reduce 方法	效率高，尤其适用于大型数组，代码简洁	相对复杂的语法