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月15日 10:18:49

相关推荐

  • 使用Moment.js过滤数组中日期属性不符合条件的对象

    本文将深入探讨如何使用JavaScript的Array.prototype.filter()方法结合Moment.js库,高效地过滤数组中日期属性不符合特定条件(例如,过期日期早于当前日期)的对象。我们将重点解析filter()方法的非原地修改特性,并提供清晰的代码示例,帮助开发者避免常见陷阱,确保…

    2025年12月20日
    000
  • 保护地图瓦片API密钥:基于Laravel的服务器端代理实现

    在使用Leaflet等前端地图库集成Breezometer等需要API密钥的瓦片地图服务时,直接在客户端暴露密钥存在安全风险。本教程将详细介绍如何通过在Laravel应用中构建一个服务器端代理服务来安全地隐藏API密钥。该代理负责接收前端请求,在服务器端添加密钥后转发请求获取瓦片数据,再将其返回给客…

    2025年12月20日
    000
  • Leaflet地图瓦片服务API密钥安全:基于Laravel的代理实现教程

    本教程旨在解决在Leaflet地图应用中直接暴露瓦片服务API密钥的安全问题。通过介绍一种基于服务器端代理的解决方案,我们展示如何在Laravel项目中构建一个代理控制器,该控制器负责在服务器端安全地附加API密钥并转发瓦片请求,从而有效保护敏感信息,同时确保地图服务的正常运行。 瓦片服务API密钥…

    2025年12月20日
    000
  • 什么是偏函数?偏函数的使用场景

    偏函数是通过固定原函数部分参数创建新函数的技术,Python中用functools.partial实现,可提升代码简洁性与复用性,适用于简化回调、定制API、预设配置等场景,但需注意避免过度使用、可变对象共享及不必要的间接性。 偏函数,说白了,就是给你一个函数,然后你提前给它固定住一部分参数,生成一…

    2025年12月20日
    000
  • JS作用域如何理解

    JS作用域决定了变量和函数的可访问范围,分为全局、函数和块级作用域,作用域链实现变量查找,闭包基于作用域链使函数访问外部变量,需注意避免全局污染和内存泄漏。 JS作用域本质上定义了变量和函数的可访问性。它决定了代码的不同部分如何访问和修改数据。简单来说,作用域就像一个“规则手册”,告诉JavaScr…

    2025年12月20日
    000
  • 使用 Intl.DateTimeFormat 精确处理跨时区时间戳的指南

    本文旨在解决使用 Intl.DateTimeFormat 显示跨时区时间戳时遇到的常见问题。核心在于指出三字母时区缩写(如PST、MST)的局限性,并强调应采用国际IANA时区标识符(如”America/Los_Angeles”)来确保时间转换的准确性和一致性,尤其是在涉及夏…

    2025年12月20日
    000
  • js怎么判断字符串是否包含子串

    判断字符串是否包含子串最推荐使用includes(),因其语义清晰且直接返回布尔值;2. 若需获取子串位置或兼容旧浏览器,则选用indexof(),通过返回值是否为-1判断存在性;3. 对于复杂模式匹配或不区分大小写的查找,应使用正则表达式,其中test()方法适合布尔判断,match()可返回匹配…

    2025年12月20日
    000
  • js怎么获取浏览器窗口大小

    获取javascript中浏览器窗口大小不包括滚动条,使用window.innerwidth和window.innerheight可直接获取可视区域宽高;1. 标准模式下推荐使用window.innerwidth/height或document.documentelement.clientwidth…

    2025年12月20日 好文分享
    000
  • js 怎样合并两个对象

    在javascript中合并对象最推荐的方式是使用展开语法或object.assign()方法,1. 展开语法通过{…obj1, …obj2}创建新对象,不修改原对象,符合不可变性原则;2. object.assign()通过object.assign(target, sou…

    2025年12月20日
    000
  • JS如何实现WeakMap?弱引用的使用

    WeakMap通过弱引用键解决内存泄漏问题,适用于关联对象私有数据、缓存和DOM状态管理,其键必须为对象且不可遍历,与Map的强引用和通用性形成对比,适合需生命周期同步的场景。 WeakMap在JavaScript中是一个非常巧妙的工具,它允许你以一种特殊的方式存储键值对,即键是弱引用。这意味着当一…

    2025年12月20日
    000
  • React应用中多层组件间Props传递的最佳实践

    本文探讨了在React应用中处理多层嵌套组件间Props传递的优化策略。针对常见的Prop Drilling问题,我们提出了将通用组件抽象化,并利用React的children Prop机制,避免中间组件不必要的Props传递。这种方法能有效简化组件结构,提高代码可读性和可维护性,同时也会讨论更复杂…

    2025年12月20日
    000
  • js 如何用chunk将数组分割为多个小块

    数组分块的核心思路是通过遍历原数组并以固定步长使用slice方法截取子数组,直到末尾;2. 分块主要用于优化大数据量下的渲染性能、实现分批数据传输、提升用户体验及满足特定ui布局需求;3. 除基础for循环外,还可使用reduce实现声明式分块、借助lodash的chunk函数简化操作,或利用生成器…

    2025年12月20日
    000
  • 什么是贪心算法?贪心算法的适用条件

    贪心算法的核心思想是在每一步选择中都采取当前状态下最优的决策,期望通过一系列局部最优解最终得到全局最优解,其与动态规划的最大区别在于贪心算法不具备回溯机制,决策一旦做出不可更改,而动态规划通过保存子问题的解并综合考虑所有可能路径来保证全局最优;判断贪心算法是否适用的关键是问题必须同时满足贪心选择性质…

    2025年12月20日
    000
  • js怎么判断一个变量是否是数组

    判断一个变量是否为数组最推荐的方法是使用 array.isarray(),因为它准确、可靠且能正确处理跨iframe等不同执行环境下的数组判断;2. typeof 不能用于判断数组,因为它对所有对象(包括数组、普通对象、null)都返回”object”,无法区分具体类型;3.…

    2025年12月20日 好文分享
    000
  • 什么是单向数据流?数据流的管理

    单向数据流通过State、Action、View三者协作,确保数据从Action到Store再到View的单向流动,提升应用的可预测性与可维护性,解决了双向绑定导致的数据混乱问题,适用于大型应用开发。 单向数据流,简单来说,就是数据只能在一个方向上流动,不能反向流动。这带来了一种可预测性和易于调试的…

    2025年12月20日
    000
  • JS如何实现通知提醒

    JavaScript实现通知提醒的核心是使用Notification API发送系统级通知或创建自定义DOM元素实现页面内提示。首先需通过Notification.requestPermission()请求用户授权,获准后即可调用new Notification()显示系统通知,适用于新消息、任务完…

    2025年12月20日
    000
  • 什么是Atomics?原子操作的应用

    原子操作是并发编程中确保数据一致性的核心机制,它通过硬件支持保证操作的不可分割性,避免竞态条件。相比互斥锁,原子操作粒度更细、开销更低,适用于计数器、标志位等场景,能有效提升并发性能。其典型应用包括无锁计数、自旋锁和无锁数据结构,且std::shared_ptr的引用计数也依赖原子操作。然而,原子操…

    2025年12月20日
    000
  • js如何删除数组中的特定元素

    在javascript中删除数组特定元素,最常用的方法是使用splice()或filter()。1. 使用splice()方法可直接修改原数组,需先通过indexof()找到元素索引,再调用splice(index, 1)删除该元素,但删除多个匹配项时需在循环中配合i–避免索引错位;2.…

    2025年12月20日
    000
  • 什么是Web Worker?多线程的实现

    Web Worker通过后台线程执行耗时任务,避免阻塞主线程,提升页面响应速度。 Web Worker 允许你在后台线程中运行 JavaScript 代码,而不会阻塞主线程,从而提升 Web 应用的性能和响应速度。它本质上是浏览器提供的一种多线程解决方案,但与传统的多线程模型有所不同,它基于消息传递…

    2025年12月20日
    000
  • 什么是无障碍?ARIA属性的应用

    无障碍的核心是让所有人平等使用数字产品,ARIA通过为自定义组件添加语义(如角色、状态、属性)弥补HTML不足,但应优先使用原生语义标签,并配合键盘交互与焦点管理,结合实际测试确保残障用户可感知、操作内容,实现技术向善。 无障碍,简单来说,就是让每个人,无论身体能力如何,都能平等地获取和使用信息、产…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信