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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 10:47:23
下一篇 2025年12月20日 10:47:35

相关推荐

  • 如何解决本地图片在使用 mask JS 库时出现的跨域错误?

    如何跨越localhost使用本地图片? 问题: 在本地使用mask js库时,引入本地图片会报跨域错误。 解决方案: 要解决此问题,需要使用本地服务器启动文件,以http或https协议访问图片,而不是使用file://协议。例如: python -m http.server 8000 然后,可以…

    2025年12月24日
    200
  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • 什么是功能类优先的 CSS 框架?

    理解功能类优先 tailwind css 是一款功能类优先的 css 框架,用户可以通过组合功能类轻松构建设计。为了理解功能类优先,我们首先要区分语义类和功能类这两种 css 类名命名方式。 语义类 以前比较常见的 css 命名方式是根据页面中模块的功能来命名。例如: 立即学习“前端免费学习笔记(深…

    2025年12月24日
    000
  • 正则表达式在文本验证中的常见问题有哪些?

    正则表达式助力文本输入验证 在文本输入框的验证中,经常遇到需要限定输入内容的情况。例如,输入框只能输入整数,第一位可以为负号。对于不会使用正则表达式的人来说,这可能是个难题。下面我们将提供三种正则表达式,分别满足不同的验证要求。 1. 可选负号,任意数量数字 如果输入框中允许第一位为负号,后面可输入…

    2025年12月24日
    000
  • SCSS – 增强您的 CSS 工作流程

    在本文中,我们将探索 scss (sassy css),这是一个 css 预处理器,它通过允许变量、嵌套规则、mixins、函数等来扩展 css 的功能。 scss 使 css 的编写和维护变得更加容易,尤其是对于大型项目。 1.什么是scss? scss 是 sass(syntropically …

    2025年12月24日
    000
  • 为什么多年的经验让我选择全栈而不是平均栈

    在全栈和平均栈开发方面工作了 6 年多,我可以告诉您,虽然这两种方法都是流行且有效的方法,但它们满足不同的需求,并且有自己的优点和缺点。这两个堆栈都可以帮助您创建 Web 应用程序,但它们的实现方式却截然不同。如果您在两者之间难以选择,我希望我在两者之间的经验能给您一些有用的见解。 在这篇文章中,我…

    2025年12月24日
    000
  • 姜戈顺风

    本教程演示如何在新项目中从头开始配置 django 和 tailwindcss。 django 设置 创建一个名为 .venv 的新虚拟环境。 # windows$ python -m venv .venv$ .venvscriptsactivate.ps1(.venv) $# macos/linu…

    2025年12月24日
    000
  • css3选择器优化技巧

    CSS3 选择器优化技巧可提升网页性能:减少选择器层级,提高浏览器解析效率。避免通配符选择器,减少性能损耗。优先使用 ID 选择器,快速定位目标元素。用类选择器代替标签选择器,精确匹配。使用属性选择器,增强匹配精度。巧用伪类和伪元素,提升性能。组合多个选择器,简化代码。利用 CSS 预处理器,增强代…

    2025年12月24日
    300
  • 花 $o 学习这些编程语言或免费

    → Python → JavaScript → Java → C# → 红宝石 → 斯威夫特 → 科特林 → C++ → PHP → 出发 → R → 打字稿 []https://x.com/e_opore/status/1811567830594388315?t=_j4nncuiy2wfbm7ic…

    2025年12月24日
    000
  • css代码规范有哪些

    CSS 代码规范对于保持一致性、可读性和可维护性至关重要,常见的规范包括:命名约定:使用小写字母和短划线,命名特定且描述性。缩进和对齐:按特定规则缩进、对齐选择器、声明和值。属性和值顺序:遵循特定顺序排列属性和值。注释:解释复杂代码,并使用正确的语法。分号:每个声明后添加分号。大括号:左大括号前换行…

    2025年12月24日
    200
  • 响应式HTML5按钮适配不同屏幕方法【方法】

    实现响应式HTML5按钮需五种方法:一、CSS媒体查询按max-width断点调整样式;二、用rem/vw等相对单位替代px;三、Flexbox控制容器与按钮伸缩;四、CSS变量配合requestAnimationFrame优化的JS动态适配;五、Tailwind等框架的响应式工具类。 如果您希望H…

    2025年12月23日
    000
  • html5怎么导视频_html5用video标签导出或Canvas转DataURL获视频【导出】

    HTML5无法直接导出video标签内容,需借助Canvas捕获帧并结合MediaRecorder API、FFmpeg.wasm或服务端协同实现。MediaRecorder适用于WebM格式前端录制;FFmpeg.wasm支持MP4等格式及精细编码控制;服务端方案适合高负载场景。 如果您希望在网页…

    2025年12月23日
    300
  • 如何查看编写的html_查看自己编写的HTML文件效果【效果】

    要查看HTML文件的浏览器渲染效果,需确保文件以.html为扩展名保存、用浏览器直接打开、利用开发者工具调试、必要时启用本地HTTP服务器、或使用编辑器实时预览插件。 如果您编写了HTML代码,但无法直观看到其在浏览器中的实际渲染效果,则可能是由于文件未正确保存、未使用浏览器打开或文件扩展名设置错误…

    2025年12月23日
    400
  • node.js怎么运行html_node.js运行html步骤【指南】

    答案是使用Node.js内置http模块、Express框架或第三方工具serve可快速搭建服务器预览HTML文件。首先通过http模块创建服务器并读取index.html返回响应;其次用Express初始化项目并配置静态文件服务;最后利用serve工具全局安装后一键启动服务器,三种方式均在浏览器访…

    2025年12月23日
    300
  • html5游戏怎么修改_HT5改JS逻辑或资源文件调整游戏玩法效果【修改】

    需直接编辑核心JavaScript代码或替换图片、音频等资源文件;先用浏览器开发者工具的Sources面板定位含game、main等关键词的.js文件,再搜索score++、if (health等逻辑片段进行修改。 如果您下载了某个HTML5游戏的本地文件,希望调整其玩法逻辑或替换资源以改变视觉效果…

    2025年12月23日
    000
  • html5怎么重叠图片_html5用position:absolute或z-index让图片重叠【重叠】

    在HTML5中实现图片重叠需结合CSS定位与层叠控制:一、用position:absolute+top/left精确定位,父容器设position:relative;二、用z-index设定堆叠顺序(需已定位);三、用transform:translate()实现无文档流干扰的偏移重叠;四、用CSS…

    2025年12月23日
    200
  • html5怎么打包运行_HT5用Webpack或Gulp打包后浏览器打开运行【打包】

    应通过 HTTP 服务运行打包后的 HTML5 页面,而非双击打开:一、Webpack 配 webpack-dev-server 启动本地服务;二、Gulp 配 BrowserSync 提供实时重载;三、用 Python/Node.js 轻量 HTTP 工具托管 dist 目录;四、仅当必须双击运行…

    2025年12月23日
    000
  • html5文件运行不出来怎么回事_析html5文件运行失败原因【解析】

    首先检查文件扩展名和编码格式,确保为.html且使用UTF-8编码;接着验证HTML5结构完整性,包含及正确闭合的标签;然后排查外部资源路径是否正确,利用开发者工具查看404错误;排除浏览器兼容性问题,优先在现代浏览器中测试并避免未广泛支持的API;检查JavaScript语法错误与执行顺序,确保脚…

    2025年12月23日
    000
  • html5如何建立站点_HTML5站点建立步骤与网站搭建技巧【指南】

    HTML5网站搭建需五步:一、建my-website目录及css/js/images子目录,含index.html;二、写标准HTML5骨架,含DOCTYPE、lang、meta、语义化标签;三、外链CSS与defer/async脚本;四、用http-server启本地服务;五、用email/num…

    2025年12月23日
    000
  • html5怎么插入文档_HT5用object或iframe嵌入PDF/Word文档显示【插入】

    可在HTML5中用iframe或object标签嵌入PDF,需设宽高及可访问路径;Word文档需借OneDrive等第三方服务代理渲染;须处理跨域限制并提供下载降级方案。 如果您希望在HTML5页面中嵌入PDF或Word文档并直接显示,可以使用或标签实现。以下是几种可行的嵌入方法: 一、使用ifra…

    2025年12月23日
    200

发表回复

登录后才能评论
关注微信