怎样使用JavaScript Set集合更快地编写代码

本篇文章给大家分享的是有关怎样使用javascript Set集合更快地编写代码，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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

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

数组可以执行的操作与Set可以执行的操作之间存在大量的交叉。使用Set往往会带来数组无法实现的运行时优势。在这篇文章中，我们将探讨如何做到这一点。

Set有何不同?

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

const arr = [A, B, C, D]; console.log(arr.indexOf(A)); // Result: 0 console.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的运行速度有实际的了解。我将分享我做的三个简单测试和获得的结果。

1. 准备测试

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

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

2. 测试一：搜索项目

首先，让我们搜索数字 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倍。

3. 测试二：添加项目

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

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倍。

4. 测试三：删除项目 

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

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，希望我已经展示了它们的实用性!

以上就是怎样使用JavaScript Set集合更快地编写代码，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网html频道。