突破数组困境，去重保真，前端学习者必备技能

2024-01-26 08:33:56

前言

作为一名前端学习者，面对数组去重这个看似简单却又不容忽视的问题，我们难免会感到困惑。数组去重，顾名思义，就是从数组中剔除重复元素，保留唯一元素。这种操作在前端开发中十分常见，比如当我们从数据库中获取数据并将其存储在数组中时，就需要对数组进行去重，以避免出现重复的数据。

数组去重方法

1. indexOf + splice

indexOf()方法可用于在数组中查找指定元素的索引。我们可以利用这个方法来找出重复元素，然后使用splice()方法将它们删除。这种方法比较简单直观，但效率较低，尤其是在数组长度较大时。

function removeDuplicates1(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (result.indexOf(arr[i]) === -1) {
      result.push(arr[i]);
    }
  }
  return result;
}

2. Set

Set是一种内置的数据结构，它可以自动去除重复元素。我们可以将数组转换为Set，然后将其转换为数组即可。这种方法非常简单高效，但要注意Set不会保持元素的原有顺序。

function removeDuplicates2(arr) {
  return Array.from(new Set(arr));
}

3. Filter

Filter方法可以从数组中筛选出满足指定条件的元素。我们可以使用filter()方法来找出重复元素，然后将其删除。这种方法的效率与indexOf() + splice()方法类似，但更加灵活，因为它允许我们自定义过滤条件。

function removeDuplicates3(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

结语

以上就是三种常用的数组去重方法。每种方法都有其优缺点，我们可以根据具体情况选择合适的方法。希望这篇文章能帮助读者们更好地理解和掌握数组去重这一重要技能。

附加

1. 性能对比

下表比较了三种去重方法的性能。

方法	时间复杂度	空间复杂度
indexOf + splice	O(n^2)	O(n)
Set	O(n)	O(n)
Filter	O(n)	O(n)

2. 实例演示

为了更直观地展示三种去重方法的应用，我们以一个实际例子为例。假设我们有一个数组arr = [1, 2, 3, 4, 5, 1, 2, 3]，需要对其进行去重。

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

// 使用indexOf + splice方法
const result1 = removeDuplicates1(arr);
console.log(result1); // [1, 2, 3, 4, 5]

// 使用Set方法
const result2 = removeDuplicates2(arr);
console.log(result2); // [1, 2, 3, 4, 5]

// 使用Filter方法
const result3 = removeDuplicates3(arr);
console.log(result3); // [1, 2, 3, 4, 5]