详解JavaScript数组过滤相同元素的5种方法

在实际应用中，我们经常会使用数组来存储一些数据。有时候我们需要从这些数据中快速过滤出相同元素，这时候就需要用到数组去重的方法。本文将详细介绍5种常见的JavaScript数组去重方法。

1.使用Set

ES6中新增了Set对象，可以帮我们去掉数组中的重复项。我们将数组转换为Set对象，再把Set对象转换回数组，就可以过滤掉数组中的重复项。

示例代码：

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3, 4, 5]

2.使用for循环嵌套

这种方法是最原始也最常见的数组去重方法，我们使用两个for循环来遍历原始数组，将不同的值存入到结果数组中。

示例代码：

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  let flag = true;
  for (let j = 0; j < uniqueArr.length; j++) {
    if (arr[i] === uniqueArr[j]) {
      flag = false;
      break;
    }
  }
  if (flag) uniqueArr.push(arr[i]);
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

3.使用indexOf

我们可以通过indexOf方法来判断一个元素是否在数组中出现过。如果出现过，则indexOf返回该元素在数组中第一次出现的位置，否则返回-1。我们可以利用这个特性来判断重复项。

示例代码：

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (uniqueArr.indexOf(arr[i]) === -1) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

4.使用includes

ES7中增加了includes方法，用来判断一个元素是否在数组中出现过。和indexOf类似，如果出现过，则返回true，否则返回false。

示例代码：

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!uniqueArr.includes(arr[i])) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

5.使用reduce

reduce是数组的一个常用方法，它可以将数组中的每个元素依次执行回调函数，并将上一次的计算结果作为参数传递给下一次计算。我们可以使用reduce来实现数组去重。

示例代码：

let arr = [1, 2, 3, 3, 4, 5, 5];
let uniqueArr = arr.reduce((prev, cur) => {
  if (!prev.includes(cur)) {
    prev.push(cur);
  }
  return prev;
}, []);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

总结

以上是5种常见的数组去重方法，每种方法都有其优点和适用场景。在实际应用中，我们可以根据不同的需求选择不同的方法来实现数据去重。

希望本文对你有所帮助！