如何使用 Set 来提高JS代码的性能
摘要: 高效使用Set!
- 作者:前端小智
- 原文:如何使用 Set 来提高代码的性能
Fundebug经授权转载,版权归原作者所有。
为了保证的可读性,本文采用意译而非直译。
我确信有很多开发人员坚持使用基本的全局对象:数字,字符串,对象,数组和布尔值。对于许多用例,这些都是需要的。 但是如果想让你的代码尽可能快速和可扩展,那么这些基本类型并不总是足够好。
在本文中,我们将讨论JS 中Set
对象如何让代码更快— 特别扩展性方便。 Array
和Set
工作方式存在大量的交叉。但是使用Set
会比Array
在代码运行速度更有优势。
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
中的每一项都必须是惟一的。
主要的好处是什么
set
相对于数组有几个优势,特别是在运行时间方面:
- 查看元素:使用
indexOf()
或includes()
检查数组中的项是否存在是比较慢的。 - 删除元素:在
Set
中,可以根据每项的的value
来删除该项。在数组中,等价的方法是使用基于元素的索引的splice()
。与前一点一样,依赖于索引的速度很慢。 - 保存 NaN:不能使用
indexOf()
或includes()
来查找值NaN
,而Set
可以保存此值。 - 删除重复项:
Set
对象只存储惟一的值,如果不想有重复项存在,相对于数组的一个显著优势,因为数组需要额外的代码来处理重复。
时间复杂度?
数组用来搜索元素的方法时间复杂度为0(N)
。换句话说,运行时间的增长速度与数据大小的增长速度相同。
相比之下,Set
用于搜索、删除和插入元素的方法的时间复杂度都只有O(1)
,这意味着数据的大小实际上与这些方法的运行时间无关。
Set 究竟有多快?
虽然运行时间可能会有很大差异,具体取决于所使用的系统,所提供数据的大小以及其他变量,但我希望我的测试结果能够让你真实地了解Set
的速度。 我将分享三个简单的测试和我得到的结果。
准备测试
在运行任何测试之前,创建一个数组和一个 Set,每个数组和 Set 都有100万个元素。为了简单起见,我从0
开始,一直数到999999
。
let arr = [], set = new Set(), n = 1000000; for (let i = 0; i < n; i++) { arr.push(i); set.add(i); }
测试1:查找元素
我们搜索数字123123
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
倍
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
测试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:谷歌面试问题
问题:
给定一个整数无序数组和变量 sum
,如果存在数组中任意两项和使等于 sum
的值,则返回true
。否则,返回false
。例如,数组[3,5,1,4]
和 sum = 9
,函数应该返回true
,因为4 + 5 = 9
。
解答
解决这个问题的一个很好的方法是遍历数组,创建 Set
保存相对差值。
当我们遇到3
时,我们可以把6
加到Set
中, 因为我们知道我们需要找到9
的和。然后,每当我们接触到数组中的新值时,我们可以检查它是否在 Set
中。当遇到5
时,在 Set 加上4。最后,当我们最终遇到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²)
,慢得多!
参考
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有阳光保险、核桃编程、荔枝FM、掌门1对1、微脉、青团社等众多品牌企业。欢迎大家免费试用!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Android Native 内存泄漏系统化解决方案
导读:C++内存泄漏问题的分析、定位一直是Android平台上困扰开发人员的难题。因为地图渲染、导航等核心功能对性能要求很高,高德地图APP中存在大量的C++代码。解决这个问题对于产品质量尤为重要和关键,高德技术团队在实践中形成了一套自己的解决方案。 分析和定位内存泄漏问题的核心在于分配函数的统计和栈回溯。如果只知道内存分配点不知道调用栈会使问题变得格外复杂,增加解决成本,因此两者缺一不可。 Android中Bionic的malloc_debug模块对内存分配函数的监控及统计是比较完善的,但是栈回溯在Android体系下缺乏高效的方式。随着Android的发展,Google也提供了栈回溯的一些分析方法,但是这些方案存在下面几个问题: 1.栈回溯的环节都使用的libunwind,这种获取方式消耗较大,在Native代码较多的情况下,频繁调
- 下一篇
Java面试之http知识点(必问)
Java面试之http知识点(必问)详细介绍httpHTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。点击这里了解 http 1.0 vs 2.0 区别。在OSI七层模型中,HTTP协议位于最顶层的应用层中。通过浏览器访问网页就直接使用了HTTP协议。使用HTTP协议时,客户端首先与服务端的 80 端口建立一个TCP连接,然后在这个连接的基础上进行请求和应答,以及数据的交换。 HTTP有两个常用版本,分别是HTTP1.0和HTTP1.1。主要区别在于HTTP1.0中每次请求和应答都会使用一个新的TCP连接,而从HTTP1.1开始,运行在一个TCP连接上发送多个命令和应答。因此大幅度减少了TCP连接的建立和断开,提高了效率。 特点 简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。灵活...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,CentOS7官方镜像安装Oracle11G
- CentOS8编译安装MySQL8.0.19
- Windows10,CentOS7,CentOS8安装Nodejs环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- SpringBoot2整合Redis,开启缓存,提高访问速度