深入讨论JavaScript中Set对象如何让代码更快

深入讨论JavaScript中Set对象如何让代码更快

我确信有很多开发人员坚持使用基本的全局对象:数字,字符串,对象,数组和布尔值。对于许多用例,这些都是需要的。 但是如果想让你的代码尽可能快速和可扩展,那么这些基本类型并不总是足够好。

在本文中,我们将讨论JS 中Set对象如何让代码更快— 特别扩展性方便。 Array 和Set工作方式存在大量的交叉。但是使用Set会比Array在代码运行速度更有优势。

Set 有何不同

最根本的区别是数组是一个索引集合,这说明数组中的数据值按索引排序。

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

登录后复制

相比之下,set是一个键的集合。set不使用索引,而是使用键对数据排序。set 中的元素按插入顺序是可迭代的,它不能包含任何重复的数据。换句话说,set中的每一项都必须是惟一的。

立即学习“Java免费学习笔记(深入)”;

主要的好处是什么

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 

测试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.173msSet: 0.023ms

Set 速度快了7.54倍

测试2:添加元素

console.time('Array'); arr.push(n);console.timeEnd('Array');console.time('Set'); set.add(n);console.timeEnd('Set');

登录后复制Array: 0.018msSet: 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.122msSet: 0.015ms

Set 速度快了74.13倍

总的来说,我们可以看到,使用Set 极大地改善运行时间。再来看看一些Set有用的实际例子。

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

如果想快速地从数组中删除重复的值,可以将其转换为一个 Set。这是迄今为止过滤惟一值最简洁的方法:

const duplicateCollection = ['A', 'B', 'B', 'C', 'D', 'B', 'C'];// 将数组转换为 Setlet 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 

简洁的版本:

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²),慢得多!

原文地址:https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77为了保证的可读性,本文采用意译而非直译。

更多编程相关知识,请访问:编程学习网站!!

以上就是深入讨论JavaScript中Set对象如何让代码更快的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2724146.html

(0)
上一篇 2025年3月7日 23:11:14
下一篇 2025年2月22日 13:57:06

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • javascript中substr和substring的区别是什么

    javascript中substr和substring的区别是:substr是从起始索引号开始提取指定长度的字符串;substring是提取字符串中两个指定索引号之间的字符。 区别介绍: (视频学习分享:javascript视频教程) su…

    2025年3月7日
    200
  • 你所不知道的JavaScript

    JavaScript栏目介绍一些必会操作。 和其他“圈子”里的同学们不一样,前端圈子里的同学们都很热衷于“手写xxx方法”,基本上每天在掘金里都可以看到类似的文章。但是,很多文章(不代表全部,无意冒犯)大都是囫囵吞枣、依葫芦画瓢,经不起推敲…

    2025年3月7日
    200
  • 同时去掉字符串左边和右边空格的函数是什么?

    同时去掉字符串左边和右边空格的函数是“trim()”;trim()函数可用于删除字符串的头尾空白符,空白符包括:空格、制表符tab、换行符等其他空白符等,语法“string.trim()”。 本教程操作环境:windows10系统、java…

    2025年3月7日
    200
  • javascript如何改变原数组

    javascript改变原数组的方法:1、push往数组里面增加东西;2、pop把数组最后一位元素剪切出去;3、unshit是往数组第一位元素前面添加元素;4、shit从数组前面的第一位元素开始删除。 本教程操作环境:windows10系统…

    2025年3月7日 编程技术
    200
  • javascript提高前端代码强大的一些方法,很好!

    javascript栏目介绍提高前端代码强大的一些方法。 免费推荐:JavaScript(视频) 在过去的开发经历中处理了各种奇葩BUG,认识到代码健壮性(鲁棒性)是提高工作效率、生活质量的一个重要指标,本文主要整理了提高代码健壮性的一些思…

    2025年3月7日
    200
  • 详解JavaScript中async/await的使用方法

    ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的改进。它提供了使用同步样式代码异步访问 resoruces 的方式,而不会阻塞主线程。然而,它们也存在一些坑及问题。在本文中,将从不同的角度探讨 as…

    2025年3月7日
    200
  • JavaScript原型实现继承的方法介绍

    在这篇文章中,我们将讨论原型以及如何在 JS 中使用它们进行继承。我们还将会看到原型方法与基于类的继承有何不同。 继承 继承是编程语言的一个显著特征,随着面向对象编程语言的引入而出现。这些语言大多是基于类的语言。在这里,类就像一个蓝图,对象…

    2025年3月7日
    200
  • jQuery JavaScript ajax区别是什么

    jQuery JavaScript ajax区别:1、javaScript广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能;2、AJAX创建交互式网页应用的网页开发技术;3、jQuery方便地为网站提供AJAX交互。 j…

    2025年3月7日
    200
  • 了解JavaScript中的对象原型和原型链

    本篇文章带大家介绍一下javascript中的对象原型和原型链。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 对象原型 相信大家都这样用过  map : let arr = [0, 1, 2]let doubleArr …

    2025年3月7日
    200
  • 了解JavaScript中异步的处理方式

    在网站开发中,异步事件是项目必然需要处理的一个环节,也因为前端框架的兴起,通过框架实现的 SPA 已经是快速建构网站的标配了,一部获取数据也就成了不可或缺的一环;本文来就讲一讲 JavaScript 中异步的处理方式。 同步?异步? 首先当…

    2025年3月7日
    200

发表回复

登录后才能评论