数组去重不会？教你3招，轻松搞定！

前端

2023-07-24 23:36:30

数组去重：前端开发面试中的必备技能

前言

数组去重，这个看似简单的操作，却暗藏着许多细节，成为前端开发面试中的一个经典难题。回答不当，很可能止步于此。为了助你轻松应对，本文将深入探讨三种常见的数组去重面试题，并提供详细解答和示例代码。

一、巧用 Set 数据结构

Set 数据结构，是 JavaScript 内置的一把好刀，因为它只容纳唯一的值。基于这个特性，我们可以轻松实现数组去重。

步骤：

创建一个空 Set 对象。
将原数组中的元素逐一添加到 Set 中。
将 Set 中的元素导出到一个新数组。

示例代码：

const array = [1, 2, 3, 4, 5, 1, 2, 3];

const set = new Set(array);
const uniqueArray = [...set];

console.log(uniqueArray); // 输出： [1, 2, 3, 4, 5]

二、filter() 方法的奥妙

filter() 方法专为从数组中提取符合条件的元素而设计。巧妙利用这个特性，我们也可以实现数组去重。

步骤：

定义一个比较函数，判断两个元素是否相等。
使用 filter() 方法，过滤出比较函数返回 true 的元素。

示例代码：

const array = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArray = array.filter((item, index) => {
  return array.indexOf(item) === index;
});

console.log(uniqueArray); // 输出： [1, 2, 3, 4, 5]

三、reduce() 方法的魅力

reduce() 方法擅长将数组中的元素逐个累积，从而得到最终结果。巧用这个特性，数组去重也是信手拈来。

步骤：

定义一个空数组作为初始值。
使用 reduce() 方法，遍历原数组，将元素添加到初始值。
遇到重复元素，则跳过。

示例代码：

const array = [1, 2, 3, 4, 5, 1, 2, 3];

const uniqueArray = array.reduce((acc, item) => {
  if (!acc.includes(item)) {
    acc.push(item);
  }
  return acc;
}, []);

console.log(uniqueArray); // 输出： [1, 2, 3, 4, 5]

常见问题解答

1. 三种方法的性能对比如何？

Set 方法通常最快，其次是 filter() 方法，reduce() 方法最慢。

2. 如何处理数组中的对象？

对于包含对象的数组，Set 方法无法直接使用，需要借助 JSON.stringify() 转换。

3. 是否可以对数组进行排序去重？

可以，先使用 sort() 方法排序，再使用 filter() 方法去重。

4. 如何处理 NaN 值？

由于 NaN 与自身不相等，filter() 和 reduce() 方法会将其视为不同的元素。

5. 如何去重多维数组？

可以采用递归或深度拷贝的方式，先将多维数组转换为一维数组，再进行去重。

结语