如何使用JavaScriptSet集合更快地编写代码

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

创新互联专业为企业提供高阳网站建设、高阳做网站、高阳网站设计、高阳网站制作等企业网站建设、网页设计与制作、高阳企业网站模板建站服务，10多年高阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

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

Set有何不同?

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

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

相比之下，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。

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

2. 测试一：搜索项目

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

 
 
 
    
  
  
  
  1. let result; 
    2. 
  
  
  
  2. console.time('Array');  
    3. 
  
  
  
  3. result = arr.indexOf(123123) !== -1;  
    4. 
  
  
  
  4. console.timeEnd('Array'); 
    5. 
  
  
  
  5. console.time('Set');  
    6. 
  
  
  
  6. result = set.has(123123);  
    7. 
  
  
  
  7. console.timeEnd('Set'); 
    8.

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

3. 测试二：添加项目

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

 
 
 
    
  
  
  
  1. console.time('Array');  
    2. 
  
  
  
  2. arr.push(n); 
    3. 
  
  
  
  3. console.timeEnd('Array'); 
    4. 
  
  
  
  4. console.time('Set');  
    5. 
  
  
  
  5. set.add(n); 
    6. 
  
  
  
  6. console.timeEnd('Set'); 
    7.

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

4. 测试三：删除项目 

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

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

这是测试的代码：

 
 
 
    
  
  
  
  1. console.time('Array');  
    2. 
  
  
  
  2. deleteFromArr(arr, n); 
    3. 
  
  
  
  3. console.timeEnd('Array'); 
    4. 
  
  
  
  4. console.time('Set');  
    5. 
  
  
  
  5. set.delete(n); 
    6. 
  
  
  
  6. console.timeEnd('Set'); 
    7.

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

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

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

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

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

案例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。

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

 
 
 
    
  
  
  
  1. const findSum = (arr, val) => { 
    2. 
  
  
  
  2.   let searchValues = new Set(); 
    3. 
  
  
  
  3.   searchValues.add(val - arr[0]); 
    4. 
  
  
  
  4.   for (let i = 1, length = arr.length; i < length; i++) { 
    5. 
  
  
  
  5.     let searchVal = val - arr[i]; 
    6. 
  
  
  
  6.     if (searchValues.has(arr[i])) { 
    7. 
  
  
  
  7.       return true; 
    8. 
  
  
  
  8.     } else { 
    9. 
  
  
  
  9.       searchValues.add(searchVal); 
    10. 
  
  
  
  10.     } 
    11. 
  
  
  
  11.   }; 
    12. 
  
  
  
  12.   return false; 
    13. 
  
  
  
  13. }; 
    14.

这是一个更简洁的版本：

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

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

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

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

网站名称：如何使用JavaScriptSet集合更快地编写代码
当前链接：http://www.stwzsj.com/qtweb/news21/2471.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

搜索引擎优化知识

同城分类信息

网站建设公司　　 　域名注册　　 　关键词优化　　 　h5页面制作　　 　移动手机网站制作　　 　成都商城网站开发　　 　网上商城管理系统　　 　犀浦封阳台　　 　广告媒介投放　　 　成都网站设计　　 　柔性防护网　　 　成都响应式网站　　 　网站建设　　 　小程序　　 　工业净化空调　　 　成都网站设计公司　　 　成都网站维护　　 　成都企业网站设计　　 　专业网站设计　　 　移动网站建设