Why Sethas() is Faster Than Arrayincludes() for Finding Items

why sethas() is faster than arrayincludes() for finding items

有时,在构建应用程序时,性能最终成为关键或至少是重要的驱动因素,特别是在处理大型数据集或实时要求时。 javascript 中最常见的任务之一是检查集合中是否存在某个值。最常用的两个替代方法是 array.includes() 和 set.has()。两者都有效,但实际上,set.has() 比 array.includes 效果更好。让我们深入探讨其原因,并决定何时应该使用任一替代方案。

理解 array.includes() 与 set.has()

有两个方法看起来用法相当简单,但实现不同,即 array.includes() 和 set.has()。

array.includes()

includes() 方法检查给定值是否存在于数组中。
它利用了 o(n) 的时间复杂度,使得数组长度越大,检查值所需的时间就越长。
这是因为 array.includes() 从头到尾搜索数组(或直到找到值),数组越大,花费的时间越长。

set.has()

set 的 has() 方法也会检查给定值是否存在,但速度要快得多。
set.has() 依赖于基于哈希表的结构,该结构允许恒定时间查找,或 o(1) 时间复杂度。
与数组不同,集合是为处理唯一值而构建的,因此它内部不会有重复的值,并且具有更多的查找时间。

为什么 set.has() 对于大型数据集更快

当您使用 set.has() 时,javascript 可以通过一次直接操作找到该项目,无论集合中有多少项目。例如,在检查某个值是否在包含一百万的集合中时,set.has() 消耗的时间将与检查十完全相同。

另一方面,array.includes() 从左到右顺序检查每个元素,直到找到感兴趣的项目或到达其末尾。这意味着它的大小越长,检查时间就越长,特别是在项目接近尾部的情况下,而且肯定是当有问题的项目不存在时。

下面是一个详细的例子:

const bigarray = array.from({ length: 1000000 }, (_, i) => i);const bigset = new set(bigarray);const valuetofind = 999999;// array.includes (o(n)) - slower for large arraysconsole.time("array.includes");bigarray.includes(valuetofind);console.timeend("array.includes");// set.has (o(1)) - faster for large setsconsole.time("set.has");bigset.has(valuetofind);console.timeend("set.has");

当您运行此命令时,您会发现 set.has() 在大型数组上的性能远远优于 array.includes()。实际上,这种差异很可能会转化为更流畅的动画、更快的加载时间,甚至更少的服务器资源使用。

何时使用 set.has() 和 array.includes()

这一切都取决于您想要实现的目标。简单总结如下:

使用 set.has() 如果: -您正在处理大数据并进行大量查找。

-您正在使用唯一值,例如一组唯一的用户 id,
标签或关键字。

-您不介意将数组转换为
的少量前期成本 设置为尽量减少以后的查找次数。

使用 array.includes() 如果:– 你的数据集很小,性能差异是 可以忽略不计。

-您只需检查某个项目一次或几次,因此没有
创建集合的好处。

-您正在处理重复项,这是集合无法处理的。

示例用例

假设您正在实现一个用户搜索功能,根据阻止的单词列表过滤姓名。如果您有数百个被阻止的单词并且经常搜索,则对被阻止的单词使用集合可以使每次搜索检查更快:

const blockedWords = new Set(["spam", "test", "fakeuser", "bot"]); // Small data, but scales wellconst username = "fakeuser42";if (blockedWords.has(username)) {  console.log("Username is blocked");} else {  console.log("Username is allowed");}

即使在较小的情况下,set 也有助于保持事情的高效性和可预测性。另外,如果阻止的单词列表增长,您就已经拥有了一个可扩展的解决方案。

要点

性能:set.has() 提供 o(1) 时间复杂度,对于较大的集合来说,它比 array.includes() (o(n)) 快得多

适用性:集合是为唯一值而设计的,因此它自然地针对查找进行了优化。数组对于重复值更灵活,但在检查是否存在时速度较慢。

可扩展性:随着数据的增长,set.has() 继续表现良好,而 array.includes() 会变慢。

最后的想法

在 set.has() 和 array.includes() 之间进行选择时,了解数据集的大小和性质始终很重要。 array.includes() 非常适合小型数据集,但 set.has() 在速度至关重要的情况下是一个宝贵的工具。正确的数据结构可以帮助优化您的 javascript 应用程序,使其更快、更高效,而无需对代码进行重大更改。

因此,每当你发现自己在检查某个东西是否存在时,你应该问自己:这是数组的工作,还是我可以使用集合的力量?正确处理很可能就是您的应用程序所需要的不同。

以上就是Why Sethas() is Faster Than Arrayincludes() for Finding Items的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 17:05:31
下一篇 2025年12月19日 17:05:51

相关推荐

  • Flexbox中实现首元素左对齐,其余元素右对齐的高效方法

    本教程将深入探讨在flexbox布局中,如何不使用额外包装器,仅通过巧妙运用css的`margin-left: auto`属性,实现将首个元素固定在容器左侧,而将其余所有兄弟元素推向右侧的布局技巧。通过具体代码示例和原理分析,帮助开发者高效解决常见的导航栏或列表元素分离对齐问题。 在构建现代网页布局…

    2025年12月23日
    000
  • Flexbox布局中实现首元素左对齐与其余元素右对齐的技巧

    本文详细介绍了在css flexbox布局中,如何不依赖额外包装元素,仅通过一行css代码实现首个子元素左对齐,而其余所有子元素自动向右对齐的效果。核心技巧在于利用`margin-left: auto;`属性,巧妙地分配flex容器中的剩余空间,从而实现元素的左右分离对齐,优化布局结构。 在现代网页…

    2025年12月23日
    000
  • Flexbox布局中实现首元素左对齐与其余元素右对齐

    本文将详细介绍在flexbox布局中,如何不使用额外的包装器,仅通过css实现首个子元素左对齐,而其余子元素右对齐的布局效果。核心技巧在于利用`margin-left: auto;`将第二个元素及其后续兄弟元素推向容器的右侧,从而实现灵活且高效的两端对齐布局。 引言:Flexbox布局中的两端对齐挑…

    2025年12月23日
    000
  • W3C HTML验证常见错误解析与结构优化指南

    本教程旨在解析w3c html验证器中常见的结构性错误,特别是关于` `、“和` `元素的不当使用。文章将深入探讨这些元素的功能边界,解释错误产生的原因,并提供符合web标准的代码示例及最佳实践,帮助开发者构建语义清晰、验证通过的html页面。 HTML文档结构核心:、和 一个标准的HT…

    2025年12月23日
    000
  • HTML结构错误解析与W3C验证器指南

    本文旨在深入解析常见的html结构错误,特别是涉及` `、“和` `元素的不当使用,这些错误常导致w3c验证器报错。我们将详细阐述这些元素的正确语义和放置规则,解释隐式闭合机制如何引发验证问题,并通过实际代码示例展示如何构建符合标准、易于维护的html文档,从而提升网页的兼容性和可访问性…

    2025年12月23日
    000
  • 使用 CSS 媒体查询在不同屏幕尺寸下切换图片

    本文介绍了如何利用 css 媒体查询,根据屏幕尺寸动态切换网页中显示的图片。通过使用不同的 css 类名和 display 属性,可以轻松实现图片在不同分辨率下的自适应显示,从而提升用户体验。 在响应式网页设计中,经常需要根据不同的屏幕尺寸展示不同的图片,以优化用户体验。例如,在桌面端显示高分辨率图…

    2025年12月23日 好文分享
    000
  • 使用 Media Queries 在不同屏幕尺寸下切换图片

    本文介绍了如何利用 css media queries 在不同屏幕尺寸下动态切换图片显示。通过设置不同类名的图片标签,并结合 media queries 控制它们的显示与隐藏,可以实现响应式图片切换效果,从而优化用户在不同设备上的浏览体验。 在响应式网页设计中,根据屏幕尺寸调整图片显示是非常常见的需…

    2025年12月23日 好文分享
    000
  • Scrapy XPath 图片提取教程:解决动态类名与复杂结构问题

    本教程旨在指导Scrapy用户如何高效准确地从网页中提取产品图片链接,尤其侧重于解决CSS选择器失效的问题。我们将深入探讨XPath的强大功能,特别是contains()函数在处理动态或复杂HTML结构时的应用,并提供详细的示例代码、调试技巧及注意事项,确保您能够稳定地抓取所需图片数据。 网页图片提…

    2025年12月22日
    000
  • Scrapy实战:利用XPath精准提取产品图片URL

    本教程旨在解决使用Scrapy从电商网站提取产品图片URL时,CSS选择器失效的问题。我们将深入探讨为何常见CSS选择器可能无法奏效,并提供一个基于XPath contains() 函数的鲁棒解决方案,确保能够准确、高效地获取所有目标图片链接,提升爬虫的稳定性和数据捕获能力。 在进行网页数据抓取时,…

    2025年12月22日
    000
  • JavaScript代码规范_ESLint插件开发

    ESLint插件开发需创建含rules、configs的npm包,如eslint-plugin-myteam;编写规则函数遍历AST节点,例如禁止console.log需监听MemberExpression并用context.report报错;通过RuleTester测试有效与无效代码案例;发布后在…

    2025年12月21日
    000
  • 深入理解TypeScript中this上下文丢失问题及解决方案

    本文旨在解决TypeScript类方法中this上下文意外变为undefined或指向错误对象的问题,特别是在方法作为回调或被解构调用时。我们将深入探讨JavaScript/TypeScript中this的工作原理,分析导致上下文丢失的常见场景,并提供两种主要解决方案:使用箭头函数作为类属性以及在构…

    2025年12月21日
    000
  • React Hooks中处理异步操作的策略:告别JSX中的await限制

    在react hooks和jsx中直接使用异步操作(如api数据加载)会导致编译错误,因为`await`不能在同步渲染上下文中使用。本文将介绍如何利用`use-async-effect`库,通过集中式管理或组件拆分两种策略,优雅地处理组件内的异步数据加载,从而避免在jsx中直接调用异步函数并等待其结…

    2025年12月21日
    000
  • Redux 状态持久化:浏览器中的实现方法

    本教程详细介绍了如何在浏览器中持久化 redux reducer 的状态,以便在页面重新加载后保持 ui 配置等信息。文章探讨了两种主要方法:一是通过手动编写 `localstorage` 存取逻辑并集成到 reducer 中,二是利用 `redux-persist` 等第三方库简化实现。通过示例代…

    2025年12月21日
    000
  • Nest.js自定义验证管道:@Injectable() 的作用与正确应用

    本文深入探讨nest.js自定义验证管道中`@injectable()`装饰器的作用与正确用法。我们将区分手动实例化管道与利用nest依赖注入机制创建管道的场景,阐明何时需要将管道标记为可注入,并提供具体的代码示例,帮助开发者理解如何在`@usepipes`中有效集成依赖注入的验证管道。 Nest.…

    2025年12月20日
    000
  • Nest.js自定义验证管道:深入理解@Injectable的用途与实践

    本文探讨nest.js中自定义验证管道何时应使用`@injectable`装饰器。当管道自身需要注入其他服务时,`@injectable`是必需的,此时应将管道类引用传递给`@usepipes`。若管道构造函数需接收动态运行时参数,直接实例化管道(`new pipeclass(args)`)通常更合…

    2025年12月20日
    100
  • 如何利用 Web Codecs API 在浏览器中直接处理视频帧的编码与解码?

    Web Codecs API 提供对音视频编解码的底层控制,支持逐帧处理,适用于实时滤镜、录制、推流等场景。1. 可通过 captureStream() 和 MediaStreamTrackProcessor 获取 canvas 或 video 的 VideoFrame;2. 使用 VideoEnc…

    2025年12月20日
    000
  • 如何构建一个支持多租户的JavaScript前端应用?

    答案:前端通过识别租户、动态加载配置、路由与状态隔离及主题适配实现多租户支持。具体包括:1. 通过子域名、路径或登录信息确定租户并存储上下文,请求时携带租户标识;2. 初始化时获取租户专属UI配置与功能开关,动态更新主题与组件显示;3. 路由与状态管理中嵌入租户ID,按租户隔离数据查询与本地缓存;4…

    2025年12月20日
    000
  • 如何实现一个基于WebCodecs的硬件加速视频编码?

    首先确认浏览器支持硬件加速编码,通过VideoEncoder.isConfigSupported()检测配置兼容性并选择H.264等广泛支持的格式;接着创建VideoEncoder实例,设置hardwareAcceleration为’prefer-hardware’以优先启用…

    2025年12月20日
    000
  • 怎么使用JavaScript操作浏览器后退与前进?

    JavaScript通过history对象实现浏览器后退前进功能,核心方法包括history.back()、history.forward()和history.go(delta),可模拟用户导航行为;结合pushState、replaceState与popstate事件,能在单页应用中实现无刷新UR…

    2025年12月20日
    000
  • 使用 LWC 自定义组件显示层级 JSON 数据为树形结构

    本文介绍如何在 Lightning Web Components (LWC) 中,不依赖 lightning-tree 组件,而是通过自定义组件和递归方法,将层级 JSON 数据渲染成可折叠的树形结构。通过示例代码,详细讲解了组件的实现思路和关键步骤,并提供了注意事项,帮助开发者高效地构建自定义树形…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信