前端面试必备 | 数组去重篇(P1-10)

alt

1. 如何使用 JavaScript 实现数组去重?

在 JavaScript 中,可以使用多种方法实现数组去重。

以下是几个常见的实现方式:

  1. 使用 Set 数据结构:Set 是 ES6 引入的一种数据结构,它只存储唯一的值,可以用来快速去除数组中的重复元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]
  1. 使用 Array.prototype.filter() 方法:使用 filter() 方法结合 indexOf() 方法来筛选出不重复的元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]
  1. 使用 Array.prototype.reduce() 方法:使用 reduce() 方法结合判断重复的对象集合来构建一个新的数组。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((accumulator, currentValue) => {
  if (!accumulator.includes(currentValue)) {
    accumulator.push(currentValue);
  }
  return accumulator;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]
  1. 使用 ES6 的 Map 数据结构:Map 类似于对象,但键可以是任意数据类型。我们可以使用 Map 来移除重复的项。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Array.from(new Map(array.map((value) => [value, value])).values());
console.log(uniqueArray); // [1, 2, 3, 4, 5]

以上方法都可以帮助你移除数组中的重复项,选择其中任何一种方法根据你的需求进行实现即可。

2. 请写出至少三种不同的数组去重方法,并比较它们的优缺点。

当需要实现数组去重时,可以选择以下三种不同的方法:

方法一:使用 Set 数据结构

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

优点:

  • 简洁易用,通过将数组转换为 Set 对象,自动去除重复项。
  • 执行效率高,适用于大型数组去重。
  • 保留了原始数组的元素顺序。

缺点:

  • 无法去除 NaN(因为 NaN 不等于自身)。
  • 不适用于复杂数据类型的去重。

alt

方法二:使用 Array.prototype.filter() 方法结合 indexOf() 方法

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((value, index, self) => {
  return self.indexOf(value) === index;
});
console.log(uniqueArray); // [1, 2, 3, 4, 5]

优点:

  • 相对较简单,易于理解和实现。
  • 保留了原始数组的元素顺序。
  • 适用于大多数简单数据类型的去重。

缺点:

  • 对于大型数组来说,性能较差,因为需要多次执行 indexOf() 方法。
  • 不适用于复杂数据类型的去重。

alt

方法三:使用 Object 键值对

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
console.log(uniqueArray); // [1, 2, 3, 4, 5]

优点:

  • 可以去除任意数据类型的重复项。
  • 保留了原始数组的元素顺序。

缺点:

  • 对于复杂数据类型,需要通过序列化和反序列化来进行去重,可能会有一定的性能损失。
  • 对于包含函数、Symbol 等特殊数据类型的数组,无法正确地去重。
  • 当数组中的元素有相同的 JSON.stringify() 的结果时,会将它们视为重复项。

alt

根据实际需求,可以选择最适合的方法来进行数组去重。若需要简洁高效的去重操作,Set 方法是一个不错的选择。如果需要保留原始数组的元素顺序,可以使用 filter() 方法结合 indexOf() 方法。而使用 Object 键值对的方法则适用于复杂数据类型的去重,但需要注意它的一些限制和性能问题。

3. 如何使用 Set 数据结构进行数组去重?

要使用 Set 数据结构进行数组去重,可以按照以下步骤进行操作:

  1. 创建一个 Set 对象,并将原始数组作为参数传递给 Set 构造函数。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueSet = new Set(array);
  1. 使用扩展运算符(...)或 Array.from() 方法将 Set 对象转换回数组形式。

使用扩展运算符:

const uniqueArray = [...uniqueSet];
console.log(uniqueArray); // [1, 2, 3, 4, 5]

使用 Array.from():

const uniqueArray = Array.from(uniqueSet);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

通过上述步骤,我们可以使用 Set 数据结构将数组中的重复元素自动去除,并得到一个不含重复元素的新数组。

值得注意的是,Set 对象会自动忽略重复的元素,因为 Set 集合中的元素是唯一的。此外,Set 对象在保存元素的顺序方面与数组不同,它并不保留插入元素的顺序。因此,如果需要保留原数组的元素顺序,可以使用扩展运算符(...)或 Array.from() 方法将 Set 对象转换为数组。

4. 如果要在考虑浏览器兼容性的情况下实现数组去重,你会选择哪种方法?

如果要在考虑浏览器兼容性的情况下实现数组去重操作,我会选择:使用 Array.prototype.filter() 方法结合 indexOf() 方法。

此方法相对简单,适用于大多数浏览器,并且在性能方面比较可靠。它不依赖于新的 JavaScript 特性或数据结构,因此可以在较旧的浏览器中正常工作。

以下是使用该方法去重的示例代码:

function removeDuplicates(array) {
  return array.filter((value, index, self) => {
    return self.indexOf(value) === index;
  });
}

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = removeDuplicates(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

需要注意的是,该方法在大型数组上的性能可能不如其他方法,因为它需要多次执行 indexOf() 方法。但在较小的数组中,性能问题不太明显。

如果浏览器兼容性是主要的考虑因素,并且对性能要求不太高,使用Array.prototype.filter() 方法结合 indexOf() 方法是一个可靠的选择。

5. 如何使用 reduce 方法实现数组去重?

可以使用 reduce 方法结合 indexOf 方法来实现数组去重。下面是使用 reduce 方法进行数组去重的示例代码:

function removeDuplica

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端面试必备 文章被收录于专栏

前端面试必备知识点:HTML和CSS、JS(变量/数据类型/操作符/条件语句/循环;面向对象编程/函数/闭包/异步编程/ES6)、DOM操作、HTTP和网络请求、前端框架、前端工具和构建流程、浏览器和性能优化、跨浏览器兼容性、前端安全、数据结构和算法、移动端开发技术、响应式设计、测试和调试技巧、性能监测等。准备面试时,建议阅读相关的技术书籍、参与项目实践、刷题和练习,以深化和巩固你的知识。

全部评论
Set 是 ES6 引入的一种数据结构,它只存储唯一的值,可以用来快速去除数组中的重复元素
点赞 回复 分享
发布于 2023-09-10 21:09 北京
打卡,若需要简洁高效的去重操作,Set 方法是一个不错的选择。 如果需要保留原始数组的元素顺序,可以使用 filter() 方法结合 indexOf() 方法
点赞 回复 分享
发布于 2023-09-10 21:01 广东

相关推荐

不愿透露姓名的神秘牛友
08-01 18:38
点赞 评论 收藏
分享
06-15 20:57
已编辑
门头沟学院 Java
CARLJOSEPH...:年轻人有傲气很正常,但是建议工作前洗净傲气。 说实在的,什么奖学金什么奖项的都很一般。尊重你的老师,在有时间的时候去上课,真遇到走不开的事,请态度端正地向你的老师说明情况,请求请假。我相信任何一个有师德的老师都会允许的(我的老师就是这样)。
点赞 评论 收藏
分享
07-29 13:49
深圳大学 运营
字节我爱你
JamesGosli...:秋招还是实习啊
点赞 评论 收藏
分享
评论
4
6
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务