史上最全JavaScript数组去重的十种方法（推荐）

2023年5月27日下午6:48 • JavaScript

下面是对于“史上最全JavaScript数组去重的十种方法（推荐）”这篇文章的详细讲解。

1. 引言

文章介绍了在JavaScript中使用十种方法对数组进行去重的详细解析，旨在让读者学会如何在实际开发中解决数组去重问题。

2. 数组去重方法

2.1 使用Set

使用Set可以很方便地对数组进行去重，因为Set内部的元素是唯一的，所以会自动去除重复元素。

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

2.2 使用indexOf

使用indexOf可以找出一个元素在数组中第一次出现的位置，因此遍历数组，对于元素第一次出现的位置保留，后续出现的则忽略。

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

2.3 使用includes

includes方法与indexOf类似，都是判断元素是否在数组中，但是includes返回的是true或false，可以更直观地进行判断。

const arr = [1, 2, 2, 3, 3, 4, 5];
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]

2.4 使用filter

使用filter可以过滤出符合条件的元素组成新的数组，结合indexOf可以实现数组去重。

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

2.5 使用reduce

reduce方法可以通过累加器去除重复元素。

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

2.6 使用Map

使用Map也可以实现数组去重，因为它内部存储的是键值对，所以重复的元素会被自动去除。

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

2.7 使用递归

使用递归可以进行数组去重，每次取出一个元素，去掉之后的重复的元素组成新的数组，然后继续进行去重操作。

const arr = [1, 2, 2, 3, 3, 4, 5];
function unique(arr) {
  if (arr.length === 1) {
    return arr;
  }
  const first = arr[0];
  const rest = unique(arr.slice(1));
  if (rest.includes(first)) {
    return rest;
  } else {
    return [first, ...rest];
  }
}
console.log(unique(arr)); // [1, 2, 3, 4, 5]

2.8 使用双重循环

使用双重循环可以对数组进行去重，外层循环遍历每一个元素，内层循环判断是否有相同的元素。

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

2.9 使用hash表

使用hash表可以对数组进行去重，遍历数组时，将元素存储在hash表中，并记录是否重复出现。

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

2.10 使用ES6 Map和Set

使用ES6的Map和Set可以实现高效的数组去重。

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

const map = new Map();
const uniqueArr2 = [];
for (let i = 0; i < arr.length; i++) {
  if (!map.has(arr[i])) {
    map.set(arr[i], true);
    uniqueArr2.push(arr[i]);
  }
}
console.log(uniqueArr2); // [1, 2, 3, 4, 5]