返回

数组去重大法宝,还不快来围观!

前端

数组去重:面试必备技能

前言

数组去重是面试中最常见的考题之一,掌握多种去重方法是应对自如的关键。在这篇博客中,我们将深入探讨数组去重的奥秘,为你提供丰富的备考资源。

1. 使用 Set

Set 是 ES6 中引入的新数据结构,它以自动去重的特性而闻名。我们可以利用它将数组中的元素转换为 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

indexOf() 方法可以返回某个元素在数组中第一次出现的位置。我们可以利用它来判断元素是否重复,并过滤掉重复的元素。

代码示例:

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]) === i) {
    uniqueArr.push(arr[i]);
  }
}
console.log(uniqueArr); // [1, 2, 3, 4, 5]

4. 使用 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]

5. 使用 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]

6. 其他方法

除了上述方法外,还有一些其他去重方法,如:

  • 使用 reduce() + concat()
  • 使用 sort() + filter()
  • 使用 ES6 Map

选择哪种方法取决于具体情况和个人喜好。

常见问题解答

1. 如何处理 NaN 值?

NaN 值在 Set 中是唯一的,因此使用 Set 去重可以保留 NaN 值。

2. 如何处理对象数组?

对于对象数组,需要使用更复杂的去重方法,如 lodash.uniqBy() 或自定义比较函数。

3. 如何按特定字段去重?

可以使用 lodash.uniqBy() 方法或自定义比较函数按特定字段进行去重。

4. 如何在去重后保持元素的顺序?

使用 indexOf() 或 includes() 方法会破坏元素的顺序。可以使用 Set 去重,然后再根据原始数组的顺序重建数组。

5. 如何判断数组是否已经去重?

可以使用 Set.size === array.length 或 arr.length === [...new Set(arr)].length 来判断。

总结

掌握数组去重的多种方法是面试中的必备技能。通过了解 Set、filter、indexOf、includes 和 lodash 等工具,以及解决常见问题的技巧,你可以在面试中游刃有余。