JavaScript 数组去重：直击面试，直达本质

2024-02-05 10:13:45

JavaScript 数组去重：多种方法，各显其能

数组去重的意义

数组去重，顾名思义，就是将数组中重复的元素剔除，留下不重复的元素。在前端开发中，数组去重可谓是家常便饭，无论是在数据处理、表单验证还是数据展示方面，都扮演着举足轻重的角色。掌握数组去重的各种方法，不仅可以提高代码质量，还能帮助你轻松化解面试难题。

多样去重手法，各有千秋

1. 循环与索引：老骥伏枥，坚守初心

循环与索引，是数组去重中最基础的方法。通过外层循环遍历数组，内层循环查找与当前元素相同的元素，如果找到，则删除内层循环中的元素。虽然效率不高，但胜在逻辑简单，易于理解。

function unique1(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    let isUnique = true;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        isUnique = false;
        break;
      }
    }
    if (isUnique) {
      result.push(arr[i]);
    }
  }
  return result;
}

2. Set 与索引：相辅相成，去重无忧

Set数据结构具有自动去重的特性，与索引结合使用，可谓相得益彰。通过遍历数组，将每个元素加入Set中，再遍历Set，取出其中的元素。这样一来，重复的元素自然而然地被过滤掉了。

function unique2(arr) {
  const set = new Set();
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (!set.has(arr[i])) {
      set.add(arr[i]);
      result.push(arr[i]);
    }
  }
  return result;
}

3. 索引与运算符：巧用工具，化繁为简

索引与运算符，也能轻松实现数组去重。通过遍历数组，利用索引和indexOf方法，判断当前元素是否已存在于去重后的数组中。如果不存在，则将其加入数组。这种方法简单高效，但对于大规模数组，效率略逊一筹。

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

4. 数据类型转换：妙手回春，焕然一新

JavaScript数据类型转换的特性，也能为数组去重打开一扇新的大门。通过将数组转换为Set，利用Set的自动去重特性，再将Set转换为数组，就能轻松去除重复元素。这种方法简洁高效，但要注意，转换过程中可能会丢失某些特定数据类型的信息。

function unique4(arr) {
  return [...new Set(arr)];
}

5. 算法与性能：大显身手，效率至上

对于大规模数组，循环和索引等方法难免力不从心。这时，不妨借助更高效的算法，如哈希表或位图，来提升去重性能。哈希表利用哈希函数将元素映射到哈希值，从而实现快速查找和插入，而位图则通过位运算，巧妙地标记元素的存在与否，同样能够达到高效去重的目的。

结语：去重之道，取长补短

数组去重的方法多种多样，每种方法都有其优缺点。在实际应用中，需要根据数组的特点和性能要求，选择合适的方法。对于小规模数组，循环与索引或索引与运算符就已足够；对于中等规模数组，Set与索引的组合是一个不错的选择；而对于大规模数组，则不妨考虑采用哈希表或位图等高效算法。熟练掌握这些方法，让你在数组去重的道路上游刃有余，代码质量和面试表现双双提升！

常见问题解答