前端集合删除对象_如何使用JavaScript Set集合更快地编写代码

我敢肯定，有很多开发人员坚持使用基本的全局对象：number，string，object，array和boolean值。

对于许多用例，这些都是你所需要的。但是，如果你想使代码尽可能快和可扩展，那么这些基本类型并不总是足够好。

在本文中，我们将讨论JavaScript的 Set集合如何使你的代码更快，尤其是在扩展时。数组可以执行的操作与Set可以执行的操作之间存在大量的交叉。使用Set往往会带来数组无法实现的运行时优势。在这篇文章中，我们将探讨如何做到这一点。

Set有何不同？

最根本的区别是数组是索引集合，这意味着数组中的数据值由索引排序。

const arr = [A, B, C, D];console.log(arr.indexOf(A)); // Result: 0console.log(arr.indexOf(C)); // Result: 2

相比之下，Set是一个键控集合。 Set使用键对数据进行排序，而不是使用索引。Set的元素可以按插入顺序进行迭代，并且不能包含任何重复数据。换句话说，集合中的每个项目都必须是唯一的。

主要好处是什么？

直接比较，Set集合比数组具有多个优点，特别是在运行时间上更快：

• 搜索项目：使用 indexOf() 或 includes() 检查数组中是否存在某项比较慢。
• 删除项目：在Set集合中，可以按项目的值删除项目。在数组中，等效项是根据元素的索引使用 splice()。与上一点一样，依赖索引的速度很慢。
• 插入项目：与使用 push()，unshift() 或等效方法将项目添加到数组相比，将项目添加到Set更快。
• 储存NaN：你不能使用 indexOf() 或 include() 来查找值 NaN，而Set可以存储该值。
• 删除重复项：Set对象仅存储唯一值。如果要避免存储重复项，则这是优于数组的显着优势，在数组中，需要附加代码来处理重复项。

时间的复杂度是多少？

数组用于搜索项目的方法的线性时间复杂度为O(N)。换句话说，运行时间以与数据大小增加相同的速率增加。

相比之下，Set用于搜索，删除和插入项目的方法的时间复杂度仅为O(1)——这意味着数据的大小实际上与这些方法的运行时间无关！

Set集合的速度究竟快多少？

尽管运行时间可能会因所使用的系统，所提供数据的大小和其他变量而有很大不同，但我希望我的测试结果能使你对Set的运行速度有实际的了解。我将分享我做的三个简单测试和获得的结果。

/ 准备测试 /

在运行任何测试之前，让我们创建一个数组和一个Set，每个数组具有一百万个条目。为简单起见，我将从0开始，一直到999,999。

let arr = [], set = new Set(), n = 1000000;for (let i = 0; i < n; i++) {  arr.push(i);  set.add(i);}

/ 测试1：搜索项目 /

首先，让我们搜索数字 123123，我们知道它将返回true。

let result;console.time('Array'); result = arr.indexOf(123123) !== -1; console.timeEnd('Array');console.time('Set'); result = set.has(123123); console.timeEnd('Set');

结果：Array: 0.173ms，Set: 0.023ms，Set的速度快了7.54倍。

/ 测试2：添加项目 /

现在，让我们向每个集合中添加一个新项目。

console.time('Array'); arr.push(n);console.timeEnd('Array');console.time('Set'); set.add(n);console.timeEnd('Set');

结果：Array: 0.018ms，Set: 0.003ms，Set速度提高了6.73倍。

/ 测试3：删除项目 /

最后，让我们从每个集合中删除一个项目(我们可以使用刚刚添加的项目)。没有内置的数组方法，因此我们将创建一个辅助函数以保持所有内容的整洁：

const deleteFromArr = (arr, item) => {  let index = arr.indexOf(item);  return index !== -1 && arr.splice(index, 1);};

这是测试的代码：

console.time('Array'); deleteFromArr(arr, n);console.timeEnd('Array');console.time('Set'); set.delete(n);console.timeEnd('Set');

结果：Array: 1.122ms，Set: 0.015ms，在这个例子中，Set的速度是惊人的74.13倍！

总的来说，我们可以看到，使用Set而不是数组可以极大地改善运行时。现在让我们来看看一些实际的例子，在这些例子中，Set集合是有用的。

案例1：从数组中删除重复的值

如果要快速从数组中删除重复的值，可以将其转换为Set。到目前为止，这是过滤唯一值的最简洁的方法：

const duplicateCollection = ['A', 'B', 'B', 'C', 'D', 'B', 'C'];// 如果要将数组变成Set集合let uniqueCollection = new Set(duplicateCollection);console.log(uniqueCollection) // Result: Set(4) {"A", "B", "C", "D"}// 如果你想将值保留在数组中let uniqueCollection = [...new Set(duplicateCollection)];console.log(uniqueCollection) // Result: ["A", "B", "C", "D"]

案例2：一个Google面试问题

给定一个无序的整数数组和一个值 sum，如果可以相加任何两个项目以使它们等于 sum 的值，则返回 true。否则，返回false。

因此，如果给定数组 [3，5，1，4] 和值 9，则我们的函数应返回 true，因为 4 + 5 = 9。

解决这个问题的一种很好的方法是遍历数组，同时创建一组Set。

让我们将这种想法应用于上面的示例。当我们遇到 3 时，可以将 6 加到我们的Set中，因为我们知道我们需要找到一个 9 的和。然后，每次我们接触数组中的新值时，我们都可以检查它是否在我们的Set中。当我们到了 5 ，我们就会把 4 加入到我们的Set中。然后，当我们最终遇到 4 时，我们也会在我们的Set中找到它，所以我们可以返回 true。

该解决方案可能如下所示：

const findSum = (arr, val) => {  let searchValues = new Set();  searchValues.add(val - arr[0]);  for (let i = 1, length = arr.length; i < length; i++) {    let searchVal = val - arr[i];    if (searchValues.has(arr[i])) {      return true;    } else {      searchValues.add(searchVal);    }  };  return false;};

这是一个更简洁的版本：

const findSum = (arr, sum) =>  arr.some((set => n => set.has(n) || !set.add(sum - n))(new Set));

因为Set.prototype.has() 的时间复杂度仅为O(1)，所以使用Set来存储而不是数组可以帮助我们整体解决方案获得线性运行时间O(N)。

如果我们改为依赖 Array.prototype.indexOf() 或 Array.prototype.includes() ，它们的时间复杂度均为O(N)，则总运行时间将为O(N²)，慢得多！

如果你以前从未接触过JavaScript Set，希望我已经展示了它们的实用性！

---

如果对你有所启发和帮助，可以点个关注、收藏、转发，也可以留言讨论，这是对作者的最大鼓励。

作者简介：Web前端工程师，全栈开发工程师、持续学习者。

私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省不少钱！