如何使用 JavaScript 集合让您的代码运行得更快?
在编写代码时,我们总是试图让我们的代码更易于阅读、更简单、更高效、更小巧。为此,我们遵循了几种提高代码效率的方法。在本文中,我们将重点介绍一些基于 Javascript 集合的技术,以执行某些类似数组或基于集合的应用程序,这些应用程序将运行得更快,代码也将更简洁。让我们关注几个用例。
集合与数组的不同之处以及使用集合而非数组的好处
数组是索引集合,其中每个元素都与特定索引相关联。另一方面,集合是键控集合。在集合中,数据元素根据其键值排序。并且集合不允许重复,因此集合中的所有元素都是唯一的。使用集合有几个好处,可以让我们的代码运行得更快。
要检查元素是否存在于数组中,我们可以使用数组的 indexOf() 或 includes() 函数。与集合中的 has() 函数相比,这是一个缓慢的操作。
我们可以使用它们的值从集合中删除元素。但在数组中,我们可以根据元素的索引使用函数 splice()。因此,此操作也是基于索引的,这是一个较慢的过程。
同样,使用 push() 或 unshift() 方法在数组中插入元素比集合插入操作慢。
无论我们是否可以在集合中存储 NaN 值,javascript 数组中都不允许存储 NaN。
由于集合不允许重复元素,我们可以使用集合删除重复项。方法很简单。我们将数组中存在的所有元素插入到集合中而不检查任何条件,然后简单地从集合中取出所有元素。它将自动删除重复的元素,只有唯一的元素才会存在。
为什么集合比数组更快
javascript 数组上的大多数操作,如插入、删除、搜索等都是线性时间操作。它们需要 O(n) 时间才能完成,其中 n 是数组的大小。但由于集合使用键来存储元素,因此大多数操作需要常数时间 O(1)。因此集合的大小不会影响集合集合的性能。现在让我们看几个例子来分析集合在 javascript 中有多快。
集合和数组的极限性能测试的初始设置
我们正在创建一个数组和一个包含 1000000 个元素的集合。它们从 0 开始到 999999。然后我们将对这些数据结构进行不同的测试。
代码
let A = [] S = new Set() size = 1000000; for (let i = 0; i < size; i++) { A.push(i); S.add(i); }
项目搜索性能测试
让我们在数组和集合中查找一个元素,比如 56420。我们还显示执行此操作所需的时间。从时间值中,我们可以轻松了解它们花费了多少时间,因此哪个花费的时间更少,性能更好。
注意− 这些代码示例结果无法显示在 HTML 页面上。要获取结果,您需要在本地文件上运行这些脚本,并从浏览器的 Javascript 控制台上检查结果。
示例
let A = [] S = new Set() size = 1000000; for (let i = 0; i < size; i++) { A.push(i); S.add(i); } let res; let toSearch = 56420; console.time( 'ArrTime' ); res = A.indexOf( toSearch ) !== -1; console.timeEnd( 'ArrTime' ); console.time( 'SetTime' ); res = S.has( toSearch ); console.timeEnd( 'SetTime' );
在不同系统和浏览器上,时间可能有所不同,但数组总是比集合花费更长的时间。在这个例子中,在代码执行时,数组搜索花费了 0.172ms 的时间,而集合花费了 0.008ms 的时间,快了近 21 倍。
项目插入性能测试
让我们看另一个类似的例子,我们将一个元素插入到集合和数组中,然后根据执行时间分析它们的性能。
示例
let A = [] S = new Set() size = 1000000; for (let i = 0; i < size; i++) { A.push(i); S.add(i); } console.time( 'ArrTimeInsert' ); A.push( size ); console.timeEnd( 'ArrTimeInsert' ); console.time( 'SetTimeInsert' ); S.add( size ); console.timeEnd( 'SetTimeInsert' );
数组的插入耗时为 0.140ms,集合的插入耗时为 0.009ms。这里我们还可以看到集合的性能更好,比数组快 15.5 倍。
项目删除性能测试
元素删除的类似测试。在 JavaScript 中从数组中删除元素并不是一个简单的过程。从给定索引中删除元素需要几个步骤。对于集合,我们可以使用 delete() 方法使用值进行删除。让我们看一下代码以便更好地理解。
示例
let A = [] S = new Set() size = 1000000; for (let i = 0; i < size; i++) { A.push(i); S.add(i); } function deleteFromArray(array, element){ let idx = array.indexOf(element); return idx !== -1 && array.splice(idx, 1); } let res; let toDelete = 56420; console.time( 'ArrTimeDelete' ); res = deleteFromArray( A, toDelete); console.timeEnd( 'ArrTimeDelete' ); console.time( 'SetTimeDelete' ); res = S.delete( toDelete ); console.timeEnd( 'SetTimeDelete' );
数组删除耗时 1.09 毫秒,但这不是实际删除时间。两个操作合并。首先,我们找到给定元素的索引,然后执行删除操作。对于集合,它花费的时间几乎与其他操作相同,从而确保集合操作需要恒定的时间来执行。
结论
在为大型应用程序开发系统时,系统的性能在所有领域都应该非常高效。编写更快、更高效的代码始终是开发人员的良好习惯。本文介绍了在 javascript 中使用集合数据结构而不是数组数据结构来提高其性能的好处。Javascript 数组操作(如插入、删除和搜索)需要线性时间,这取决于数组中存在的元素数量,另一方面,集合使用恒定时间算法来执行这些操作。集合根据键存储数据,这使得搜索、插入和删除变得高效。数组使用基于索引的方法,在实践中会降低上述操作的性能。