JS数组去重的6种方法完整实例

为什么要去重

在实际的开发过程中，有时候我们需要对一个数组进行操作，但是这个数组中可能存在重复的元素。这时候就需要对数组进行去重操作，以便得到我们需要的元素或数据。

去重方法

方法一：使用set去重

使用ES6中的Set数据结构可以非常方便地对一个数组进行去重操作。

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

方法二：使用filter去重

通过Array.prototype.filter()函数去重，通过筛选数组中的元素，只保留第一次出现的元素，达到去重效果。

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

方法三：使用reduce去重

使用reduce函数遍历数组，将数组元素作为key，存放在一个对象里面，最后返回这个对象的所有属性值组成的数组，达到去重效果。

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

方法四：使用Map去重

使用Map数据结构可以存储键值对，其中键为数组元素的值，值为该元素出现的次数。最后遍历Map，只取出值为1的元素，达到去重效果。

const arr = [1, 2, 2, 3, 4, 4, 5];
const map = new Map();
arr.forEach(item => {
  if (!map.has(item)) {
    map.set(item, 1);
  } else {
    map.set(item, map.get(item) + 1);
  }
});
const newArr = [];
for (let [key, value] of map) {
  if (value === 1) {
    newArr.push(key);
  }
}
console.log(newArr); // [1, 2, 3, 4, 5]

方法五：使用递归去重

通过递归的方式去重，将数组的第一个元素与后面的元素逐一比较，如果发现重复元素就去掉后面的元素，继续递归，直到剩下最后一个元素进行比较并返回结果。

const arr = [1, 2, 2, 3, 4, 4, 5];
function unique(arr) {
  if (arr.length === 1) {
    return arr;
  }
  const first = arr.shift();
  return unique(arr.filter(item => item !== first)).unshift(first) && arr;
}
console.log(unique(arr)); // [1, 2, 3, 4, 5]

方法六：使用indexOf去重

使用indexOf进行去重，通过判断元素在数组中第一次和最后一次出现的位置，来对数组进行去重。

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

总结

以上就是6种JS数组去重的方法，使用不同的方法可以达到同样的效果。在实际开发使用的时候，可以根据数据的特性来选择不同的方法。如果是ES6环境，建议使用方法一，它既简单又不容易出错。