9种JS数组去重大揭秘，带你秒变去重高手！

JavaScript 数组去重：9 个行之有效的解决方案

引言

在处理数据时，我们经常需要去除数组中的重复元素，这一过程称为“去重”。JavaScript 提供了多种方法来实现数组去重，本文将深入探讨九种行之有效的解决方案，并提供详尽的示例代码。

1. Set()：一劳永逸的去重利器

Set() 是 JavaScript 中的一个内置对象，专门用于存储唯一值。通过将数组中的元素直接转为 Set，然后转回数组，即可轻松实现去重。

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

2. filter()：过滤掉重复元素

filter() 方法可以根据提供的过滤函数对数组进行过滤，从而去除不满足条件的元素。我们可以利用这个特性来实现数组去重。

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

3. indexOf() + lastIndexOf()：前后夹击，找出重复项

indexOf() 和 lastIndexOf() 方法可以分别找出元素在数组中的第一次出现位置和最后一次出现位置。我们可以利用这两个方法来找出并去除重复元素。

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

4. find() + findIndex()：精准定位，一网打尽

find() 和 findIndex() 方法可以根据提供的查找函数在数组中找到满足条件的第一个元素及其索引。我们可以利用这个特性来找出并去除重复元素。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [];
arr.forEach((item) => {
  if (uniqueArr.findIndex((x) => x === item) === -1) {
    uniqueArr.push(item);
  }
});
console.log(uniqueArr); // [1, 2, 3, 4, 5]

5. includes()：简单高效，一针见血

includes() 方法可以判断某个元素是否在数组中出现过。我们可以利用这个特性来实现数组去重。

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

6. 对象数组去重：巧用对象属性，一网打尽

对于对象数组，我们可以利用对象的属性来实现去重。

const arr = [
  { name: 'John', age: 20 },
  { name: 'Mary', age: 25 },
  { name: 'John', age: 30 },
  { name: 'Bob', age: 35 },
];
const uniqueArr = [];
const seen = {};
arr.forEach((item) => {
  const key = item.name + item.age;
  if (!seen[key]) {
    uniqueArr.push(item);
    seen[key] = true;
  }
});
console.log(uniqueArr);

7. 递归：步步为营，逐个去除

递归是一种将问题分解成更小版本的方法。我们可以利用递归来实现数组去重。

function unique(arr) {
  if (arr.length === 0) {
    return [];
  } else {
    return [arr[0]].concat(unique(arr.slice(1).filter((item) => item !== arr[0])));
  }
}
const arr = [1, 2, 3, 4, 5, 1, 2, 3];
console.log(unique(arr)); // [1, 2, 3, 4, 5]

8. 正则表达式：精准匹配，高效去重

正则表达式是一种强大的匹配模式。我们可以利用正则表达式来实现数组去重。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = [...new Set(arr.join().match(/[0-9]+/g))];
console.log(uniqueArr); // [1, 2, 3, 4, 5]

9. Lodash：强大工具，一站式解决

Lodash 是一个 JavaScript 工具库，提供了一系列实用函数。其中，_.uniq() 函数可以轻松实现数组去重。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const uniqueArr = _.uniq(arr);
console.log(uniqueArr); // [1, 2, 3, 4, 5]

常见问题解答

1. 哪种方法最适合我的情况？

• 如果数组元素为简单类型（如数字或字符串），则 Set() 或 filter() 方法是不错的选择。
• 如果数组元素为对象，则使用对象数组去重方法。
• 如果数组规模较大，则考虑使用 Lodash 的 _.uniq() 函数。

2. 如何处理嵌套数组？

• 使用 Set() 或 filter() 方法时，嵌套数组将被视为单个元素。
• 使用 indexOf() + lastIndexOf() 方法时，需要先将嵌套数组扁平化。

3. 如何实现稳定去重？

• filter() 方法提供了一个稳定的去重顺序。
• 使用 Set() 或 indexOf() + lastIndexOf() 方法会根据元素的插入顺序进行去重。

4. 如何去重一个对象数组，同时保留其顺序？

• 使用对象数组去重方法或 Lodash 的 _.uniqBy() 函数，根据某个属性进行去重。

5. 如何实现高效的数组去重？

• 优先考虑 Set() 或 filter() 方法。
• 对于大型数组，可以使用 Set() 或 Lodash 的 _.uniq() 函数。
• 如果需要稳定去重，则使用 filter() 方法。

结论

数组去重是一个常见的 JavaScript 任务，有多种方法可以实现。本文介绍了九种行之有效的解决方案，涵盖了各种场景和需求。掌握这些方法将帮助你轻松应对各种数组去重挑战，提升你的 JavaScript 技能。