ES6 中的数组去重详解

在前端开发中，我们经常会遇到需要对数组进行去重的场景。从 ES6 开始，数组去重的方法不再局限于传统的循环和判断过程，而是可以利用新的语法和 API 来更加方便和高效地处理这个问题。本文将详细介绍 ES6 中的数组去重方法，涵盖常见的基础方法和优化策略，帮助读者快速掌握这个技术点。

基础方法

利用 Set

ES6 中提供了一种新的数据类型 Set，它类似于数组，但成员的值都是唯一的，不存在重复的值。因此，如果我们需要对一个数组进行去重，可以将其转换为 Set 类型，再转换回数组类型，即可完成去重的操作。这里的转换操作可以通过扩展运算符（...）或者 Array.from() 方法来实现。

以下是利用 Set 去重的示例代码：

const arr = [1, 2, 3, 2, 1];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3]

const arr = [1, 2, 3, 2, 1];
const uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // [1, 2, 3]

利用 filter

除了利用 Set 外，我们还可以使用数组的 filter() 方法来实现去重。filter() 方法会根据指定条件过滤出符合要求的元素，并返回一个新的数组。利用 filter() 方法对数组去重的逻辑是：遍历原始数组，将每个元素与之前已经出现过的元素比较，如果没有重复，则将其添加到结果数组中。

以下是利用 filter() 去重的示例代码：

const arr = [1, 2, 3, 2, 1];
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3]

利用 reduce

除了利用 Set 和 filter 外，我们还可以使用数组的 reduce() 方法来实现去重。reduce() 方法会对数组中的每个元素执行一个指定的函数，并将其结果汇总成一个最终值。利用 reduce() 方法对数组去重的逻辑是：遍历原始数组，将每个元素添加到结果数组中，但在添加之前先判断这个元素是否已经存在于结果数组中。

以下是利用 reduce() 去重的示例代码：

const arr = [1, 2, 3, 2, 1];
const uniqueArr = arr.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3]

优化策略

除了基础方法外，我们还可以通过一些优化策略来提高数组去重的性能和效率。

利用 Map

Map 是另一种新的数据类型，它也可以用来存储不重复的值。与 Set 不同的是，Map 允许我们自定义键值对，这样可以更加灵活地控制存储和查找的过程。利用 Map 对数组去重的逻辑是：遍历原始数组，将每个元素作为键值存入 Map 中，如果键值已经存在，则不添加，最后将 Map 中的键值对转换为数组返回。

以下是利用 Map 去重的示例代码：

const arr = [1, 2, 3, 2, 1];
const uniqueArr = ((arr) => {
  const map = new Map();
  arr.forEach((item) => map.set(item, item));
  return [...map.values()];
})(arr);
console.log(uniqueArr); // [1, 2, 3]

利用 Object

与 Map 类似的是，我们也可以使用 Object 来实现数组的去重。利用 Object 对数组去重的逻辑是：遍历原始数组，将每个元素作为对象的键，值为空对象，并将这个对象作为值存入一个新的对象中，这样就可以保证对象中的键值对是唯一的。最后将新的对象中的键值转换为数组返回。

以下是利用 Object 去重的示例代码：

const arr = [1, 2, 3, 2, 1];
const uniqueArr = ((arr) => {
  const obj = {};
  arr.forEach((item) => obj[item] = {});
  return Object.keys(obj).map((key) => Number(key));
})(arr);
console.log(uniqueArr); // [1, 2, 3]

对比优化

我们可以通过对比不同方法的性能和效率来确定哪种方法更适合我们的项目需求。下面是一组对比数据，分别是利用 Set、filter、reduce、Map 和 Object 实现数组去重的时间和内存占用情况（数据来源：https://github.com/pigcan/blog/issues/2）：

通过对比可以发现，利用 Object 的方法不仅速度最快，而且占用内存最少，也比其他方法更加简单和直接。因此，在实际开发中，我们可以根据具体需求选择最适合的方法，或者根据数据规模情况进行针对性调优，以达到最佳的效果。

总结

本文详细介绍了 ES6 中的数组去重方法，包括基础方法和优化策略。不同方法在实现原理上有所不同，但都可以有效地对数组进行去重，并且通过对比可以发现，利用 Object 的方法具有最优的性能和效率。希望本文能够帮助读者掌握数组去重的技巧，提高前端开发的效率和水平。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65aa4288add4f0e0ff3dcc81