JavaScript 数组去重方法：Set、filter、reduce 实现原理详解

JavaScript 数组去重方法：Set、filter、reduce 实现原理详解

在 JavaScript 开发中，我们经常需要对数组进行去重操作。本文将介绍三种常用的数组去重方法，并分析其原理，帮助你理解数组去重的实现机制，并选择最适合你的方法。

方法一：利用 Set 去重

Set 是 ES6 中新增的一种数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。所以我们可以利用 Set 来去重。

let arr = [1, 2, 3, 2, 1];
let set = new Set(arr);
let newArr = Array.from(set);
console.log(newArr); // [1, 2, 3]

上面的代码中，我们先定义了一个数组 arr，然后利用 Set 去重，最后将 Set 转化为数组。

方法二：利用 filter 和 indexOf 去重

我们也可以利用 filter 和 indexOf 方法来实现数组去重。

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

上面的代码中，我们利用了 filter 方法来筛选符合条件的元素，然后用 indexOf 方法来判断元素是否在原数组中出现过，如果是第一次出现，就返回 true，否则返回 false，最终得到去重后的数组。

方法三：利用 reduce 和 includes 去重

我们也可以利用 reduce 方法和 includes 方法来实现数组去重。

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

上面的代码中，我们利用了 reduce 方法来遍历原数组，然后利用 includes 方法来判断元素是否在 prev 数组中出现过，如果没有出现过，就将元素添加到 prev 数组中，最终得到去重后的数组。

总结

三种方法各有优劣：

• Set 方法: 代码简洁，效率较高，适合处理大量数据。
• filter 和 indexOf 方法: 代码易于理解，但效率略低于 Set 方法。
• reduce 和 includes 方法: 逻辑清晰，适合处理复杂场景，但效率相对较低。

选择哪种方法取决于你的需求和代码风格。希望本文能够帮助你更好地理解 JavaScript 数组去重方法。