六大方法巧用JS数组去重，轻松处理重复元素

2024-02-21 18:33:35

前言

在JavaScript中，数组是一种非常重要的数据结构，它可以存储各种类型的数据。在实际开发中，我们经常会遇到数组中存在重复元素的情况，这可能会对我们的程序造成一些影响。因此，掌握数组去重的方法非常重要。

第一种：利用 es6 Set 类

ES6中引入的Set数据结构具有自动去重功能，我们可以利用它来轻松实现数组去重。具体步骤如下：

将数组元素转换为Set对象
将Set对象转换为数组

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

第二种：利用对象键名的唯一性

我们可以利用对象键名的唯一性来实现数组去重。具体步骤如下：

将数组元素作为对象键名
遍历对象，将键名收集到一个新的数组中

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
const obj = {};
arr.forEach((item) => {
  obj[item] = true;
});
const newArr = Object.keys(obj);
console.log(newArr); // [1, 2, 3, 4, 5]

第三种：一层循环 + 数组 Api

我们可以利用一层循环和数组的Api来实现数组去重。具体步骤如下：

遍历数组
使用indexOf方法查找当前元素在数组中的位置
如果位置不为-1，则说明该元素是重复的，将其删除

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

第四种：利用数组下标去重

我们可以利用数组下标来实现数组去重。具体步骤如下：

遍历数组
使用一个临时数组存储不重复的元素
如果当前元素在临时数组中不存在，则将其添加到临时数组中

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

第五种：双重循环

我们可以使用双重循环来实现数组去重。具体步骤如下：

遍历数组
对于每个元素，遍历数组的剩余部分
如果找到重复的元素，则将其删除

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

第六种：利用 sort 排序后再处理

我们可以利用sort方法对数组进行排序，然后将相邻的重复元素删除。具体步骤如下：

对数组进行排序
遍历数组
如果当前元素与前一个元素相同，则将其删除

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.sort((a, b) => a - b);
for (let i = 1; i < arr.length; i++) {
  if (arr[i] === arr[i - 1]) {
    arr.splice(i, 1);
  }
}
console.log(arr); // [1, 2, 3, 4, 5]