JS数组去重15种方法：从Set到递归全解析

前言

数组去重操作在面试场景中较为常见，常要求开发者手写相关代码。若被问及可用的去重方案，能列举出10种以上通常会给面试官留下深刻印象。在实际工作项目中，通常仅需掌握使用Set对象或递归实现即可满足需求。

在实际业务项目中，数组去重逻辑多由后端处理，前端较少直接介入。尽管日常开发中使用频率不高，但了解相关实现仍有必要，以应对可能的面试考察。

本文力求内容详尽准确。若对您有所帮助，欢迎点赞和关注，这将有助于增加分享机会，促进更多内容产出。感谢支持。

1. 利用 ES6 SET 去重(最常用)

// 数组去重
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 方法一：使用Set对象
const uniqueArr1 = function(arr) {
  return Array.from(new Set(arr));
};
console.log(uniqueArr1(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

该方法优势在于逻辑简单、代码量少且易于理解。

其局限性在于无法有效去除包含空对象{}的元素。

2. 使用 fliter 方法

// 方法二：使用filter方法
const uniqueArr2 = function(arr) {
  return arr.filter((item, index, self) => self.indexOf(item) === index);
};
console.log(uniqueArr2(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

3. 使用 reduce 方法

// 方法三：使用reduce方法
const uniqueArr3 = function(arr) {
  return arr.reduce((prev, cur) => prev.includes(cur) ? prev : [...prev, cur], []);
};

4. 使用 Map 对象

// 方法四：使用Map对象
const uniqueArr4 = function(arr) {
  const map = new Map();
  return arr.filter((item) => !map.has(item) && map.set(item, 1));
};
console.log(uniqueArr4(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

5. 使用 sort 方法

// 方法五：使用sort方法
const uniqueArr5 = function(arr) {
  return arr.sort().filter((item, index, self) => item !== self[index - 1]);
};

6. 使用 includes 方法

// 方法六：使用includes方法
const uniqueArr6 = function(arr) {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (!res.includes(arr[i])) {
      res.push(arr[i]);
    }
  }
  return res;
};
console.log(uniqueArr6(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

7. 使用 indexof() 方法

// 方法七：使用indexOf方法
const uniqueArr7 = function(arr) {
  const res = [];
  for (let i = 0; i < arr.length; i++) {
    if (res.indexOf(arr[i]) === -1) {
      res.push(arr[i]);
    }
  }
  return res;
};
console.log(uniqueArr7(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

8. 使用 for …of 循环

// 方法八：使用for...of循环
const uniqueArr8 = function(arr) {
  const res = [];
  for (const item of arr) {
    if (!res.includes(item)) {
      res.push(item);
    }
  }
  return res;
};
console.log(uniqueArr8(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

9. 使用 for…in 循环

// 方法九：使用for...in循环
const uniqueArr9 = function(arr) {
  const res = [];
  for (const item in arr) {
    if (!res.includes(arr[item])) {
      res.push(arr[item]);
    }
  }
  return res;
};
console.log(uniqueArr9(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

10. 使用 white 循环

// 方法十：使用while循环
const uniqueArr10 = function(arr) {
  const res = [];
  let i = 0;
  while (i < arr.length) {
    if (!res.includes(arr[i])) {
      res.push(arr[i]);
    }
    i++;
  }
  return res;
};
console.log(uniqueArr10(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

11. 使用 do…while 循环

// 方法十一：使用do...while循环
const uniqueArr11 = function(arr) {
  const res = [];
  let i = 0;
  do {
    if (!res.includes(arr[i])) {
      res.push(arr[i]);
    }
    i++;
  } while (i < arr.length);
  return res;
};
console.log(uniqueArr11(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

12. 使用 forEach 方法

// 方法十二：使用forEach方法
const uniqueArr12 = function(arr) {
  const res = [];
  arr.forEach((item) => {
    if (!res.includes(item)) {
      res.push(item);
    }
  });
  return res;
};
console.log(uniqueArr12(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

13. 使用 map 方法

// 方法十三：使用map方法
const uniqueArr13 = function(arr) {
  const res = [];
  arr.map((item) => {
    if (!res.includes(item)) {
      res.push(item);
    }
  })
}
console.log(uniqueArr13(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

14. 利用递归去重

// 方法十四：利用递归去重
const uniqueArr14 = function(arr) {
  const res = arr;
  const len = res.length;
  for (let i = 0; i < len; i++) {
    for (let j = i + 1; j < len; j++) {
      if (res[i] === res[j]) {
        res.splice(j, 1);
        len--;
      }
    }
  }
}
console.log(uniqueArr14(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

总结

本文介绍了JavaScript数组去重的15种方法。如需了解更多JS数组去重相关内容，可查阅本站往期文章或继续阅读后续系列内容，感谢支持。

JavaScript数组去重的15种实现方案详解

前言