面试官:你会使用new Set进行去重,你知道其原理嘛?

70 阅读3分钟

前言

面试官:数组怎么去重?

我:new Set

面试官:new Set的原理是什么?

我:emmmmm

1学习.png

使用 new Set 进行去重及其原理

在 JavaScript 中,去重是处理数组时一个常见需求。Set 是 ES6 引入的一种新数据结构,可以用来实现数组的去重功能。本文将探讨如何使用 new Set 进行去重以及其背后的原理。

❓1. 什么是 Set

Set 是一个集合类型,它可以存储任何类型的唯一值,包括原始值和对象引用。与数组不同,Set 中的每个值都是唯一的,重复的值会被自动忽略。

🍉2. 使用 new Set 进行去重

要使用 Set 进行数组去重,只需将数组传递给 Set 的构造函数,然后再将其转换回数组即可。以下是具体示例:

示例代码

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

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

🌅 3. 解析代码

  • 创建 Set:通过 new Set(array) 创建一个新的 Set 实例,自动去除数组中的重复元素。
  • 转换为数组:使用扩展运算符 ...Set 转换回数组。Set 的迭代顺序与插入顺序相同,因此保留了元素的顺序。

🙋🏻 4. Set 的去重原理

Set 的去重原理基于其内部数据结构。它使用了一种类似哈希表的结构来存储值,确保每个值是唯一的。当你尝试添加一个已存在的值时,Set 会检查该值是否已存在,若存在则忽略该添加操作。

  • 值的唯一性Set 使用 SameValueZero 算法来判断值的唯一性,这与严格相等 (===) 类似,但 NaN 被视为与自身相等(即 NaNNaN 被视为相同)。
  • 性能:由于 Set 的查找和插入操作具有平均常数时间复杂度,因此在大多数情况下,使用 Set 进行去重会比手动遍历数组更高效。

❌5. 注意事项

虽然 Set 是一个强大的去重工具,但也有一些注意事项:

  • 引用类型:对于对象和数组,Set 只会根据引用来判断唯一性。因此,即使两个对象的内容相同,它们也会被视为不同的值。
const obj1 = { id: 1 };
const obj2 = { id: 1 };
const uniqueSet = new Set([obj1, obj2]);

console.log(uniqueSet.size); // 2,因为 obj1 和 obj2 是不同的引用
  • 原始值:对于原始数据类型(如数字、字符串),Set 会正常处理去重。

👋 总结

new Set 是一个简单且高效的去重方法,利用其唯一性原则和高效的内部数据结构,开发者可以快速去除数组中的重复项。理解其原理和使用方式,有助于更灵活地处理数据。通过这种方式,可以简化代码,提高性能,尤其是在处理较大的数据集时。

往期推荐

前端如何实现图片伪防盗链,保护页面图片🔥

适当使用$forceUpdate()🔥

怎么进行跨组件通信,教你如何使用provide 和 inject🔥

使用reactive导致数据失去响应式?🔥

1再见.png