十种前端数组去重方法，哪一种更适合你？

前言

数组去重对于前端来说不是一个常见的需求，一般后端都给做了，但这却是一个有意思的问题，而且经常出现在面试中来考察面试者对JS的掌握程度。本文从数据类型的角度去思考数组去重这个问题，并总结了10种常见的数组去重方法，希望能帮助您在不同的场景中选择最合适的方法。

使用 Set

Set 是 ES6 中新增的数据结构，它可以自动去除数组中的重复元素。使用 Set 来进行数组去重非常简单，只需将数组元素添加到 Set 中，然后再将其转换为数组即可。

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

使用 Map

Map 也是 ES6 中新增的数据结构，它可以将键值对存储在对象中。使用 Map 来进行数组去重也非常简单，只需将数组元素作为键添加到 Map 中，然后再将其转换为数组即可。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const map = new Map();
arr.forEach((item) => {
  map.set(item, true);
});
const newArr = [...map.keys()];
console.log(newArr); // [1, 2, 3, 4, 5]

使用 indexOf

indexOf() 方法可以返回数组中某个元素第一次出现的位置，如果不存在则返回 -1。我们可以利用这个特性来进行数组去重。

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

使用 lastIndexOf

lastIndexOf() 方法可以返回数组中某个元素最后一次出现的位置，如果不存在则返回 -1。我们可以利用这个特性来进行数组去重。

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

使用 filter

filter() 方法可以创建一个新的数组，其中包含通过指定函数测试的所有元素。我们可以利用这个特性来进行数组去重。

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

使用 reduce

reduce() 方法可以将数组中的所有元素累积成一个值。我们可以利用这个特性来进行数组去重。

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

使用 slice

slice() 方法可以从数组中提取一个子数组。我们可以利用这个特性来进行数组去重。

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

使用 concat

concat() 方法可以将两个或多个数组连接成一个新的数组。我们可以利用这个特性来进行数组去重。

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

使用 uniqueBy

uniqueBy() 方法是 lodash 中的一个方法，它可以根据指定函数的结果来对数组进行去重。

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