JavaScript中数组去重常用的五种方法详解

在JavaScript中数组去重是非常实用的技巧，可以帮助我们快速地去除数组中重复的元素，以减少数据的冗余和提高数据处理效率。接下来将详细介绍JavaScript数组去重的五种常用方法。

方法一：使用Set去重

使用Set可以轻松地实现数组去重，因为Set会自动去除重复的元素，而且Set可以很方便地转换为数组。

示例一：

let arr = ["apple", "pear", "orange", "apple", "orange", "grape"];
let set = new Set(arr);
console.log([...set]); // ["apple", "pear", "orange", "grape"]

在上面的示例中，我们先将数组转换为Set，然后通过扩展运算符(...)转换为数组，即可获得不重复的数组元素。

方法二：使用indexOf去重

使用indexOf也是一种常见的去重方式，通过找到元素在数组中第一次出现的位置，来判断是否重复。

示例二：

let arr = ["apple", "pear", "orange", "apple", "orange", "grape"];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) === -1) {
    newArr.push(arr[i]);
  }
}
console.log(newArr); // ["apple", "pear", "orange", "grape"]

在上面的示例中，我们使用for循环遍历原数组arr，判断数组元素是否已经存在于newArr中，如果不存在就将其添加到newArr中，最后输出newArr即可。

方法三：使用includes去重

ES7中新增了includes方法，可以直接判断数组中是否包含某个元素，并可以替代indexOf的功能，同时还可以更加简洁地进行去重操作。

示例三：

let arr = ["apple", "pear", "orange", "apple", "orange", "grape"];
let newArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!newArr.includes(arr[i])) {
    newArr.push(arr[i]);
  }
}
console.log(newArr); // ["apple", "pear", "orange", "grape"]

在上面的示例中，我们使用for循环遍历原数组arr，判断数组元素是否已经存在于newArr中，如果不存在就将其添加到newArr中，并使用includes替代了indexOf方法。

方法四：使用reduce去重

使用reduce方法可以更加简洁地实现数组去重，其内部实现原理是通过数组作为第一个参数，返回一个去重后的新数组。

示例四：

let arr = ["apple", "pear", "orange", "apple", "orange", "grape"];
let newArr = arr.reduce((prev, cur) => {
  if (!prev.includes(cur)) {
    prev.push(cur);
  }
  return prev;
}, []);
console.log(newArr); // ["apple", "pear", "orange", "grape"]

在上面的示例中，我们首先定义一个空数组作为reduce方法的初始值，然后在回调函数中遍历原数组，将去重后的元素添加到prev数组中，并最终返回一个去重后的新数组。

方法五：使用Map去重

使用Map的特性可以轻松实现数组去重，其原理是将数组元素作为Map的键名，Map的值可以随便赋值，因为我们只需要判定Map中是否包括某个键，而不用关心值的具体内容。

示例五：

let arr = ["apple", "pear", "orange", "apple", "orange", "grape"];
let map = new Map();
let newArr = [];
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], true);
    newArr.push(arr[i]);
  }
}
console.log(newArr); // ["apple", "pear", "orange", "grape"]

在上面的示例中，我们首先创建了一个空的Map对象，然后在for循环中遍历原数组，如果Map中不包含当前数组元素，就将其添加到Map中，并在newArr中添加该元素，最终输出newArr即可。

至此，JavaScript数组去重的五种常用方法就介绍完毕了，每种方法各有优缺点，可以根据实际应用场景，选择适合的方法。