js 如何使用intersection获取数组交集

在javascript中获取数组交集的推荐方法是结合set和filter,1. 对于原始值数组,将一个数组转换为set,利用其o(1)查找效率,再用filter筛选出另一数组中存在于set的元素,实现o(m+n)时间复杂度;2. 对于对象数组,需指定比较键(如id),将第二个数组的键值构建成set,再过滤第一个数组中键值存在于set的对象;3. 实际选择算法时应权衡数组大小、数据类型、代码可读性及是否引入工具库,优先推荐set方案以兼顾性能与简洁性,该方法完整有效且适用于大多数场景。

js 如何使用intersection获取数组交集

在JavaScript中,获取数组的交集并没有一个像Python或Ruby那样直接的

intersection

内置方法。但别担心,我们完全可以通过几种常见的编程模式,尤其是借助ES6的

Set

数据结构,高效且优雅地实现这个功能。核心思路无非就是:遍历其中一个数组,然后检查它的每个元素是否存在于另一个数组中。

解决方案

要获取两个数组的交集,我个人最推荐且最常用的方法是结合

Set

filter

。这种方式不仅代码简洁,而且在处理较大数组时性能表现也非常出色。

首先,我们可以将其中一个数组转换成

Set

Set

has()

方法查找元素的时间复杂度平均是O(1),这比数组的

includes()

方法(O(n))要快得多。接着,我们遍历另一个数组,利用

Set

has()

方法来判断当前元素是否存在于第一个数组中。

/** * 获取两个数组的交集(适用于原始值,如数字、字符串) * @param {Array} arr1 第一个数组 * @param {Array} arr2 第二个数组 * @returns {Array} 两个数组的交集 */const getIntersection = (arr1, arr2) => {  // 为了性能考虑,将较短的数组转换为Set,或者干脆默认转换第二个数组  // 这样在filter时,Set的has操作会更有效率  const set2 = new Set(arr2);   // 使用filter过滤arr1中的元素,只保留set2中存在的  const intersection = arr1.filter(item => set2.has(item));  return intersection;};// 示例用法:// const arrA = [1, 2, 3, 4, 5];// const arrB = [3, 4, 5, 6, 7];// console.log(getIntersection(arrA, arrB)); // 输出: [3, 4, 5]// 另一个例子// const arrC = ['apple', 'banana', 'orange'];// const arrD = ['grape', 'banana', 'kiwi', 'apple'];// console.log(getIntersection(arrC, arrD)); // 输出: ['apple', 'banana']

这个方法直观、高效,是我在日常开发中处理原始值数组交集时的首选。

处理大型数组交集时,性能优化有哪些考量?

在处理数组交集,特别是当数组规模达到成千上万甚至更大时,性能考量就变得尤为重要。对于小数组来说,可能你用一个简单的双层循环(比如

filter

加上

includes

,如果

includes

不基于

Set

的话)也感受不到什么差别。但一旦数据量上来,这种细微的算法差异就能导致天壤之别的执行时间。

我刚才推荐的

Set

方法,其性能优势主要体现在查找效率上。当我们将一个数组转换为

Set

后,

Set

内部通常会采用哈希表(或类似的结构)来存储元素。这意味着,当你调用

set.has(element)

时,它能够以接近O(1)的平均时间复杂度来判断元素是否存在。而如果直接使用数组的

includes()

方法,它需要从头到尾遍历数组来查找元素,这导致其时间复杂度是O(n)。

所以,一个基于

filter

Set

的交集算法,它的总时间复杂度大致是O(m + n)——创建

Set

的时间(O(n))加上

filter

遍历第一个数组并在

Set

中查找的时间(O(m) O(1))。相比之下,如果直接使用

arr1.filter(item => arr2.includes(item))

,它的时间复杂度就会是O(m n),在数组很大的时候,这简直是灾难性的。说实话,我见过不少新手在不了解

Set

特性时,直接用

includes

导致页面卡死的情况,所以这个优化点真的值得深思。

除了基础方法,如何获取包含对象的数组交集?

这是一个非常常见的场景,也经常让人头疼。因为JavaScript中对象的比较是基于引用的,也就是说,

{ id: 1 } === { id: 1 }

的结果是

false

。所以,我们不能直接把对象数组扔给

Set

或用

includes

来查找,那样是行不通的。

要获取包含对象的数组交集,我们需要定义一个“相等”的标准。通常,我们会根据对象的一个或多个唯一属性(比如

id

uuid

name

等)来判断它们是否“相同”。

实现这种交集,我的做法通常是这样的:

/** * 获取包含对象的数组交集,根据指定键进行比较 * @param {Array} arr1 第一个对象数组 * @param {Array} arr2 第二个对象数组 * @param {string} key 用于比较对象的唯一键名 (e.g., 'id', 'name') * @returns {Array} 两个数组的交集对象 */const getObjectIntersection = (arr1, arr2, key) => {  if (!key) {    console.warn("未指定用于比较的键名,可能导致非预期结果。");    // 也可以选择抛出错误或者默认使用一个通用比较    return [];   }  // 同样,为了效率,我们先构建一个Set,但这次Set里存储的是用于比较的键值  const set2Keys = new Set(arr2.map(item => item[key]));  // 过滤arr1中的对象,如果其指定键的值存在于set2Keys中,则保留  const intersection = arr1.filter(item => set2Keys.has(item[key]));  return intersection;};// 示例用法:// const users1 = [//   { id: 1, name: 'Alice' },//   { id: 2, name: 'Bob' },//   { id: 3, name: 'Charlie' }// ];// const users2 = [//   { id: 2, name: 'Bob' },//   { id: 3, name: 'Charlie' },//   { id: 4, name: 'David' }// ];// console.log(getObjectIntersection(users1, users2, 'id'));/*输出:[  { id: 2, name: 'Bob' },  { id: 3, name: 'Charlie' }]*/

这种方法的核心在于,我们把对象的比较问题转换成了原始值的比较问题,因为

id

(或其他

key

的值)通常是字符串或数字,它们是原始值,可以被

Set

正确处理。

在实际项目中,何时以及如何选择合适的交集算法?

选择合适的交集算法,这事儿吧,真得看具体情况。没有哪个算法是万能的“银弹”,但我们可以根据几个关键因素来做决策:

数组的大小:

如果数组非常小(比如几十个元素),那么性能差异几乎可以忽略不计。这时候,选择最容易理解和编写的代码(比如简单的

filter

+

includes

,即使没有

Set

优化)可能更重要,因为代码的可读性和维护性有时比极致的性能更宝贵。但如果数组可能达到几百、几千甚至上万个元素,那么

Set

的方案就成了不二之选。O(n+m)和O(n*m)的差距会让你在生产环境中痛不欲生。

数据类型:

处理原始值(数字、字符串、布尔值)的数组交集,

Set

方法简洁高效,通常是首选。处理包含对象的数组交集,就必须引入一个“比较键”的概念,用

Set

存储键值,再通过

filter

和键值查找来完成。直接用

Set

处理对象是没用的。

代码的可读性与维护性:

我发现

Set

的写法通常比多层循环或复杂条件判断更简洁明了。对于团队协作来说,清晰的代码意味着更低的维护成本。但如果团队成员对

Set

不熟悉,或者业务逻辑非常简单,那么牺牲一点点性能换取更“传统”的写法也无可厚非。

是否允许引入外部库:

在一些大型项目中,为了提高开发效率和代码健壮性,可能会引入像Lodash这样的工具库。Lodash提供了

_.intersection

方法,它可以非常方便地处理数组交集,甚至有一些高级选项。如果项目允许,使用这些经过充分测试的库也是一个不错的选择,它能帮你省去不少自己造轮子的时间。不过,我还是建议你理解其内部实现原理,这样即使没有库,你也能写出高效的代码。

总的来说,我的经验是:优先考虑

Set

方案,因为它兼顾了性能和简洁。遇到对象数组,就用

Set

key

的方式。只有在数组极小且对性能完全不敏感时,才可能考虑其他更“原始”的循环方式。理解每种方法的优劣,比死记硬背一个“最佳”方案要重要得多。

以上就是js 如何使用intersection获取数组交集的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
js中如何生成hash值
上一篇 2025年12月20日 10:47:23
js中如何生成条形码
下一篇 2025年12月20日 10:47:35

相关推荐

  • 如何通过日志排查权限问题

    排查权限问题需从日志入手,重点分析时间、用户、资源路径、拒绝原因及调用堆栈。首先检查应用日志中“用户无权访问”等提示,结合Web服务器日志中的403/401状态码定位请求异常;再查看操作系统日志如/var/log/secure中SSH或sudo拒绝记录,确认系统级权限问题;同时审查中间件如Sprin…

    2026年9月24日
    100
  • win10软件不兼容怎么办_win10软件兼容性处理方法

    首先使用兼容性疑难解答工具检测并修复问题,若无效则手动设置兼容模式为Windows 7或8,同时安装必要的Visual C++和.NET运行库,更新显卡等驱动程序,并尝试以管理员身份运行程序。 如果您尝试在Windows 10系统上运行某个软件,但出现“此应用无法在你的电脑上运行”或程序闪退等错误提…

    2026年9月24日
    000
  • VSCode如何配置.NET开发环境 VSCode搭建.NET项目的完整流程

    首先安装.net sdk并验证版本;2. 安装vscode及microsoft官方c#扩展,确保智能感知和调试功能正常;3. 通过dotnet new命令创建项目,并使用code .在vscode中打开项目;4. 添加构建和调试资产以生成tasks.json和launch.json文件;5. 安装n…

    2026年9月24日
    000
  • 大学论文怎么写?让AI工具助你一臂之力

    大学论文怎么写?让AI工具助你一臂之力大学论文怎么写?让AI工具助你一臂之力大学论文怎么写?让AI工具助你一臂之力大学论文怎么写?让AI工具助你一臂之力

    如果要选出大学学习过程中最令人头疼的事,写论文无疑能稳居榜首。从选题开题、内容撰写,到翻译润色、查重降重,每个步骤都耗时耗力,让人焦头烂额。然而,随着 ai 技术的发展,如今写论文这件事,已经可以借助智能工具变得更高效、更轻松。 开题太难?AI 来帮你破局! 论文的第一道难关就是开题。面对浩如烟海的…

    2026年9月24日 用户投稿
    100
  • Java Stream API:从嵌套集合中提取唯一值的两种高效方法

    本文详细介绍了如何利用Java Stream API中的flatMap()和mapMulti()操作,高效地从包含嵌套列表的复杂数据结构(如List中包含List)中提取并收集唯一的元素(如城市名称),替代传统的嵌套循环,提升代码的简洁性和可读性。 在java编程中,我们经常会遇到处理复杂数据结构的…

    2026年9月24日
    100
  • VSCode 怎样配置终端默认路径 VSCode 终端默认路径的配置技巧​

    在 vscode 中配置终端默认启动路径需修改 terminal.integrated.cwd 设置项;2. 可通过用户设置(全局生效)或工作区设置(项目专属)进行配置,优先级为工作区设置覆盖用户设置;3. 路径可使用绝对路径或相对路径(推荐相对路径以提升协作性),windows 系统需注意反斜杠转…

    2026年9月24日
    000
  • 1688找工厂商家如何快速上榜?怎样到1688上选好的厂家

    近年来,越来越多的企业倾向于在1688平台上寻找优质的工厂资源。然而,在众多商家中脱颖而出、实现快速上榜并非易事。本文将为您揭示1688平台上的工厂商家如何提升曝光度与知名度,助您轻松打造高人气店铺。 一、优化店铺信息 1. 完善店铺资料店铺资料是客户了解您的第一窗口,因此务必确保其完整性和专业性。…

    2026年9月24日
    000
  • 《Python完全自学教程》免费在线连载1.5

    《Python完全自学教程》免费在线连载1.5《Python完全自学教程》免费在线连载1.5《Python完全自学教程》免费在线连载1.5《Python完全自学教程》免费在线连载1.5

    说明: 本节内容,是针对非计算机专业的读者提供的补充知识。 1.5 操作系统 本节不是全面介绍操作系统知识,是提醒读者从开发者的角度认识自己的操作系统——根据多年的经验,至少要能熟练使用一些命令完成常见操作。 首先要声明硬件设备,本书所演示的代码都是基于个人计算机( Personal Compute…

    2026年9月24日 用户投稿
    700
  • 探索VSCode Jupyter Notebook集成与扩展

    VSCode集成Jupyter Notebook提升开发效率,安装Jupyter扩展后可直接运行.ipynb文件,支持内核选择、Shift+Enter执行单元格、图表渲染及变量状态保留;结合Python扩展、Pylance、GitLens等工具,实现调试、智能提示、版本控制与代码转换,适合数据分析与…

    2026年9月24日
    000
  • Linux用户adduser与useradd命令区别

    adduser是交互式脚本,默认创建家目录并设密码,适用于Debian/Ubuntu;2. useradd是底层命令,需手动加参数创建家目录和Shell,通用性强,适合脚本使用。 在Linux系统中,adduser 和 useradd 都可以用来创建新用户,但它们在实现方式、使用习惯和功能上存在明显…

    2026年9月24日
    000
  • laravel怎么使用when和unless方法动态构建集合操作_laravel when/unless集合操作构建方法

    when和unless是Laravel集合中用于条件操作的方法。when在条件为真时执行回调,unless在条件为假时执行,二者均支持链式调用且不修改原集合。示例包括根据用户角色添加数据或过滤非活跃用户,适用于多条件组合处理,提升代码可读性与函数式编程体验。 在 Laravel 中,when 和 u…

    2026年9月24日
    000
  • 迅雷浏览器怎么开启深色模式_迅雷浏览器夜间模式设置

    开启迅雷浏览器深色模式可减少夜间用眼疲劳,具体方法包括:一、通过浏览器菜单进入设置,选择外观中的深色或夜间主题,或开启“跟随系统”选项实现自动切换;二、在操作系统中启用深色模式(Windows路径为“设置>个性化>颜色”,macOS为“系统设置>通用>外观”),并确保浏览器版本最新以兼容显示;三、若…

    2026年9月24日
    100
  • DeepArt的AI混合工具怎么操作?快速生成艺术风格图像的方法

    使用DeepArt类工具时,先选匹配的风格图与内容图,调节风格强度避免失真,推荐尝试Artbreeder、RunwayML、NightCafe等多元平台以提升创作效果。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ DeepArt的AI混合…

    2026年9月24日
    000
  • windows11控制面板在哪里打开_windows11进入传统控制面板的办法

    windows11控制面板在哪里打开_windows11进入传统控制面板的办法windows11控制面板在哪里打开_windows11进入传统控制面板的办法windows11控制面板在哪里打开_windows11进入传统控制面板的办法windows11控制面板在哪里打开_windows11进入传统控制面板的办法

    1、通过Win+R输入control命令可快速打开控制面板;2、任务栏搜索“控制面板”并点击结果即可进入;3、开始菜单中展开“Windows 工具”文件夹可找到控制面板;4、文件资源管理器左侧导航栏下拉选择控制面板;5、桌面新建快捷方式输入explorer shell:ControlPanelFol…

    2026年9月24日 用户投稿
    200
  • 三星S系列手机微信收款语音播报怎么开启?配置语音的详细方法

    要开启三星S系列微信收款语音播报,需先在微信“收付款”中开启“收款到账语音提醒”,再确保手机通知权限开启、媒体音量正常,并将微信设为电池不优化应用。 三星S系列手机要开启微信收款语音播报,核心步骤其实不复杂:首先要在微信应用内部找到并激活“收款到账语音提醒”功能,同时,非常关键的一点是,确保你的三星…

    2026年9月24日
    100
  • Laravel Livewire 使用指南:构建交互式论坛的最佳实践

    本文旨在指导开发者如何在现有的 Laravel 项目中集成 Livewire,并以构建论坛为例,探讨 Livewire 组件的最佳使用方式和命名规范。文章将深入分析全页面组件和独立组件的选择,并提供实用的代码示例和建议,帮助开发者在保证项目结构清晰的前提下,充分利用 Livewire 的优势,构建高…

    2026年9月24日
    100
  • VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧

    VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧VSCode如何实现代码自动修复 VSCode智能重构与错误修正技巧

    vscode通过集成语言服务协议(lsp)、内置quick fixes和refactoring actions,并结合扩展如eslint、prettier等,实现代码自动修复与智能重构;2. 启用editor.formatonsave和editor.codeactionsonsave设置可在保存时自…

    2026年9月24日 用户投稿
    100
  • Pages如何协作修改文档 Pages跟踪修改和建议的用法

    使用Pages的协作与修订功能可高效编辑文档,先启用共享邀请协作者,再通过建议模式提出修改,所有更改以标记形式显示,经审查后接受或拒绝,最终关闭修订模式保存定稿。 如果您正在与团队成员共同编辑一份文档,但希望保留原始内容并记录所有更改建议,可以使用 Pages 的协作与修订功能来实现高效沟通。通过这…

    2026年9月24日
    100
  • Polarr的AI工具怎么裁剪图片?教你轻松实现高效图像裁剪

    Polarr的AI工具怎么裁剪图片?教你轻松实现高效图像裁剪Polarr的AI工具怎么裁剪图片?教你轻松实现高效图像裁剪Polarr的AI工具怎么裁剪图片?教你轻松实现高效图像裁剪Polarr的AI工具怎么裁剪图片?教你轻松实现高效图像裁剪

    Polarr的AI裁剪通过内容感知智能识别主体与构图焦点,提供如主体居中、构图优化和比例推荐等方案,操作上先导入图片,选择裁剪工具后AI即分析画面并生成多个推荐预设,用户可直接应用或手动微调,相比传统裁剪显著提升效率、辅助构图决策,尤其适用于社交媒体多平台比例适配,帮助保持视觉一致性并避免关键信息被…

    2026年9月24日 用户投稿
    600
  • VSCode如何运行终端命令 VSCode内置终端的使用指南

    在VSCode里运行终端命令,最直接、最核心的方式就是利用它内置的集成终端。这玩意儿简直是开发者工作流的“心脏”,你可以在不离开编辑器界面的情况下,直接敲入并执行各种命令行操作,无论是跑测试、安装依赖,还是启动项目,都方便得要命。它把代码编辑和命令执行无缝衔接起来,大大减少了上下文切换的开销。 解决…

    2026年9月24日
    200

发表回复

登录后才能评论
关注微信