JS数组去重：4种常用方法深度解析

JS数组去重：4种常用方法深度解析

在 JavaScript 开发中，数组去重是一项常见的任务。本文将介绍 4 种常用的数组去重方法，并提供代码示例和分析。

1. 使用 Set 数据结构

ES6 新增的 Set 数据结构提供了一种简洁高效的去重方式。Set 类似于数组，但其成员的值都是唯一的。

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

优点: 代码简洁易懂，执行效率高。

缺点: 无法处理对象类型的数组元素。

2. 使用 indexOf 方法

通过循环遍历数组，使用 indexOf 方法判断当前元素是否已存在于新数组中，如果不存在则将其添加到新数组中。

let arr = [1, 2, 2, 3, 4, 4, 5];
let 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]

优点: 兼容性好，适用于所有浏览器。

缺点: 执行效率相对较低，尤其对于大型数组。

3. 使用 includes 方法

与 indexOf 方法类似，使用 includes 方法判断当前元素是否已存在于新数组中，如果不存在则将其添加到新数组中。

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

优点: 语义更加清晰，代码易读性更好。

缺点: 与 indexOf 方法一样，执行效率相对较低。

4. 使用 reduce 方法

使用 reduce 方法遍历数组，将每个元素与新数组中的元素进行比较，如果不存在则将其添加到新数组中。

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

优点: 代码简洁，函数式编程风格。

缺点: 相对来说，代码可读性稍差。

总结

以上介绍了 4 种常用的 JS 数组去重方法，每种方法都有其优缺点，开发者可根据实际情况选择合适的方案。