前端 js 数组过滤相同元素的方法有哪些

数组内部的去重确实是前端开发中的常见问题，可以使用多种方法来实现。利用ES6的Set对象、使用双层for循环配合splice方法、使用filter与indexOf组合、使用reduce方法是其中常见的几种实现方式。其中，利用ES6的Set对象是最简单和现代的方法。Set对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。这可以轻松地通过将数组转换为Set，自动移除重复元素，然后再将Set转换回数组来完成数组的去重。

例如，如果有一个包含重复元素的数组array，你可以通过Array.from(new Set(array))或者使用扩展运算符[...new Set(array)]获得一个去重后的数组。这种方法极大地简化了代码，并且提升了执行效率，特别是对于大数据集而言。

一、利用ES6的Set对象

Set是ES6提供的一种新的数据结构，类似于数组，但是成员的值都是唯一的。因此最直接使用Set进行数组去重非常方便。

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

const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 输出: [1, 2, 3, 4, 5]

这种方法不仅代码简洁，执行效率也较高。一行代码便能实现去重目的。

二、双层for循环配合splice方法

使用传统for循环也是一种方法，它不依赖于ES6的新特性，因此在不支持ES6的环境下也能正常执行。这个方法的原理是通过两层循环遍历数组元素，当发现有重复元素时，使用splice方法移除它。

function unique(array) {

  for(let i = 0; i < array.length; i++) {
    for(let j = i + 1; j < array.length; j++) {
      if(array[i] === array[j]) {
        array.splice(j, 1);
        j--; // 删除后数组长度减少，j也要同步减少
      }
    }
  }
  return array;
}
const array = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(array)); // 输出: [1, 2, 3, 4, 5]

该方法的缺点是效率较低，特别是在数组很大的情况下，因为它的时间复杂度接近O(n^2)。

三、使用filter与indexOf组合

filter 是数组的一个高阶函数，可以用来过滤数组中的元素。与 indexOf 结合，可以实现去重。indexOf方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

function unique(array) {

  return array.filter((item, index) => array.indexOf(item) === index);
}
const array = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(array)); // 输出: [1, 2, 3, 4, 5]

这种方法的但相比于使用Set，该方法的效率略低，尤其是在处理大型数组时。

四、使用reduce方法

reduce 方法对数组中的每个元素执行一个由你提供的“reducer”函数，结果为一个单一的输出值。通过结合使用reduce和includes，也可以实现数组去重。

function unique(array) {

  return array.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
}
const array = [1, 2, 2, 3, 4, 4, 5];
console.log(unique(array)); // 输出: [1, 2, 3, 4, 5]

使用reduce的方法虽然代码看起来稍微复杂一些，但它提供了更高的灵活性，可以用于更复杂的数据处理任务。

小结

数组去重是一个基本而常见的需求，应根据不同的使用场景和环境支持选择合适的方法。ES6的Set对象为数组去重提供了一种简洁而高效的现代解决方案，易于理解和实现。传统的for循环方法虽然在不支持ES6的环境中仍可使用，但不是很高效。filter结合indexOf以及reduce方法都是不错的选择，但与Set相比在性能上可能会有所不足。无论选择哪种方法，了解其背后的原理以及限制，对开发者而言都是十分有益的。

相关问答FAQs：

1. 如何过滤数组中的相同元素？
过滤数组中的相同元素有多种方法，其中一种常见的方法是使用Set数据结构。通过将数组转换为Set，可以自动过滤掉重复的元素。代码示例如下：

const arr = [1, 2, 2, 3, 4, 4, 5];
const filteredArr = [...new Set(arr)];
console.log(filteredArr); // 输出 [1, 2, 3, 4, 5]

2. 如何判断数组中的元素是否重复？
判断数组中的元素是否重复可以使用循环遍历加上条件判断的方法。代码示例如下：

function hasDuplicate(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        return true;
      }
    }
  }
  return false;
}
const arr = [1, 2, 2, 3, 4, 4, 5];
console.log(hasDuplicate(arr)); // 输出 true

3. 如何获取数组中重复的元素？
如果需要获取数组中重复的元素，可以使用对象或Map数据结构来记录元素的出现次数，然后找到重复的元素。代码示例如下：

function findDuplicates(arr) {
  const countMap = new Map();
  const duplicates = [];
  for (const item of arr) {
    if (countMap.has(item)) {
      duplicates.push(item);
    } else {
      countMap.set(item, true);
    }
  }
  return duplicates;
}
const arr = [1, 2, 2, 3, 4, 4, 5];
console.log(findDuplicates(arr)); // 输出 [2, 4]

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。