JS 中数组去重的最优方案与场景选择

2023-10-12 21:10:00

在 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]

这种方案的优点是简单易用，而且效率较高。但是，它有一个缺点，就是 Set 结构是无序的，因此去重后的数组的顺序可能与原数组不同。

2. 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]

这种方案的优点是简单易懂，而且可以保持原数组的顺序。但是，它的缺点是效率较低，尤其是当数组中的重复元素较多时。

3. filter

filter() 方法可以过滤出数组中满足指定条件的元素。我们可以利用这个方法来对数组进行去重。

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

这种方案的优点是简单易懂，而且可以保持原数组的顺序。但是，它的缺点是效率较低，尤其是当数组中的重复元素较多时。

4. forEach

forEach() 方法可以遍历数组中的每个元素。我们可以利用这个方法来对数组进行去重。

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