怎样使用JavaScriptSet集合更快地编写代码-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

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

创新互联是专业的海州网站建设公司,海州接单;提供网站设计制作、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行海州网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

我敢肯定,有很多开发人员坚持使用基本的全局对象: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集合更快地编写代码,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


当前文章:怎样使用JavaScriptSet集合更快地编写代码
浏览地址:http://kswsj.cn/article/gggjcp.html

其他资讯