javaScript 数组去重

28 阅读3分钟

在 JavaScript 中,数组去重是一个常见的需求。本文将介绍几种常用的数组去重方法,并简要解释它们的原理和应用场景。


1. 使用 Set

Set 是 ES6 引入的一种数据结构,它自动去重,因为 Set 只允许存储唯一值。我们可以通过将数组转换为 Set 来去重,再将 Set 展开为数组。

js
复制代码
const arr = [1, 2, 2, 3];
// 使用 Set 去重,并通过 ... 运算符展开成数组
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3]

解释Set 的去重机制基于值的唯一性,这种方法简洁高效,适用于简单类型(如数字或字符串)的去重。


2. 使用 filterindexOf

通过 filter 方法和 indexOf,可以保留数组中首次出现的元素,过滤掉重复项。

js
复制代码
const arr = [1, 2, 2, 3];
// 通过 indexOf 找到每个元素首次出现的位置,过滤掉其他重复元素
const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(uniqueArr); // [1, 2, 3]

解释indexOf 查找某个元素在数组中首次出现的索引,filter 只保留首次出现的元素。此方法适用于数组规模较小的场景。


3. 使用 reduceincludes

reduce 是数组操作的一个强大工具,它可以通过累积方式构建一个新的数组,并通过 includes 检查是否已有某个值来实现去重。

js
复制代码
const arr = [1, 2, 2, 3];
const uniqueArr = arr.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);
console.log(uniqueArr); // [1, 2, 3]

解释includes 用于检查元素是否已经存在于结果数组中。如果不存在,则添加到结果中。这种方法易于理解,但在处理大数组时,性能不如 Set


4. 使用 Object 的键值对

利用对象的键值对唯一性,可以通过将数组元素作为对象的键,来实现去重。

js
复制代码
const arr = [1, 2, 2, 3];
const uniqueArr = [];
const obj = {};

arr.forEach(item => {
  if (!obj[item]) {
    obj[item] = true;
    uniqueArr.push(item);
  }
});

console.log(uniqueArr); // [1, 2, 3]

解释:对象的键是唯一的,因此每次遇到一个新元素时,它会被添加为对象的一个键,从而达到去重效果。该方法适用于简单类型,但不适合复杂对象的去重。


5. 使用 Map 结合 forEach

Map 是另一种数据结构,允许我们使用键值对来存储数据,结合 forEach 可以实现去重。

js
复制代码
const array = [1, 2, 3, 4, 4, 3, 2, 1];
const map = new Map();
array.forEach(item => {
  if (!map.has(item)) {
    map.set(item, true);
  }
});
const uniqueArray = [...map.keys()];
console.log(uniqueArray); // [1, 2, 3, 4]

解释Map 的键只能是唯一的,因此可以通过 map.set 来记录每个元素是否已经出现。最后通过 map.keys() 获取唯一的元素数组。


总结

  1. 如果是简单数据类型的数组去重,Set 是最简便的方法。
  2. 对于较小数组,可以使用 filter + indexOfreduce + includes
  3. 如果你需要基于对象的去重,MapObject 的键值对 是很好的选择。

根据你的数据规模和类型选择适合的方法,可以高效地实现数组去重。