前端实现数组的去重

1.前端实现数组的去重 的区别

1. 使用 Set 数据结构（ES6）

这种方法使用了 ES6 中引入的 Set 数据结构，Set 实例可以自动过滤重复元素。使用这种方法去重非常简单，只需要将数组转换成 Set 实例，然后再转换回数组即可。这种方法的优点是代码简洁，容易理解，而且性能也很不错。

1. 使用 filter 方法和 indexOf

这种方法利用了数组的 filter 方法和 indexOf 方法，遍历数组并返回一个新数组，新数组中只包含没有重复的元素。这种方法的缺点是效率较低，时间复杂度为 O(n^2)，适用于小型数组。

1. 使用 reduce 方法

这种方法使用了数组的 reduce 方法，遍历数组并返回一个新数组，新数组中只包含没有重复的元素。这种方法的缺点也是效率较低，时间复杂度为 O(n^2)，适用于小型数组。

1. 使用 Map 数据结构

这种方法使用了 ES6 中引入的 Map 数据结构，Map 实例可以自动过滤重复元素。使用这种方法去重需要额外创建一个 Map 对象，然后遍历数组并通过 Map 实例判断数组元素是否已经存在这种方法的优点是代码简单，性能较好，适用于大型数组。

      综上所述，使用 Set 或 Map 数据结构实现数组去重相对于使用 filter 和 reduce 方法效率更高，但是这些方法需要浏览器支持 ES6。因此，在实际开发中，需要根据不同的情况进行选择。

1.使用 Set 数据结构（ES6）：
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]


2.使用 filter 方法和 indexOf：

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


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


使用 Map 数据结构：

const arr = [1, 2, 2, 3, 4, 4, 5];
const map = new Map();
const uniqueArr = [];
for (const item of arr) {
  if (!map.has(item)) {
    map.set(item, true);
    uniqueArr.push(item);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]