0

0

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

畫卷琴夢

畫卷琴夢

发布时间:2025-08-24 11:50:02

|

225人浏览过

|

来源于php中文网

原创

在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
等)来判断它们是否“相同”。

先见AI
先见AI

数据为基,先见未见

下载

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

/**
 * 获取包含对象的数组交集,根据指定键进行比较
 * @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
正确处理。

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

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

  1. 数组的大小:

    • 如果数组非常小(比如几十个元素),那么性能差异几乎可以忽略不计。这时候,选择最容易理解和编写的代码(比如简单的
      filter
      +
      includes
      ,即使没有
      Set
      优化)可能更重要,因为代码的可读性和维护性有时比极致的性能更宝贵。
    • 但如果数组可能达到几百、几千甚至上万个元素,那么
      Set
      的方案就成了不二之选。O(n+m)和O(n*m)的差距会让你在生产环境中痛不欲生。
  2. 数据类型:

    • 处理原始值(数字、字符串、布尔值)的数组交集,
      Set
      方法简洁高效,通常是首选。
    • 处理包含对象的数组交集,就必须引入一个“比较键”的概念,用
      Set
      存储键值,再通过
      filter
      和键值查找来完成。直接用
      Set
      处理对象是没用的。
  3. 代码的可读性与维护性:

    • 我发现
      Set
      的写法通常比多层循环或复杂条件判断更简洁明了。对于团队协作来说,清晰的代码意味着更低的维护成本。
    • 但如果团队成员对
      Set
      不熟悉,或者业务逻辑非常简单,那么牺牲一点点性能换取更“传统”的写法也无可厚非。
  4. 是否允许引入外部库:

    • 在一些大型项目中,为了提高开发效率和代码健壮性,可能会引入像Lodash这样的工具库。Lodash提供了
      _.intersection
      方法,它可以非常方便地处理数组交集,甚至有一些高级选项。如果项目允许,使用这些经过充分测试的库也是一个不错的选择,它能帮你省去不少自己造轮子的时间。不过,我还是建议你理解其内部实现原理,这样即使没有库,你也能写出高效的代码。

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

Set
方案,因为它兼顾了性能和简洁。遇到对象数组,就用
Set
key
的方式。只有在数组极小且对性能完全不敏感时,才可能考虑其他更“原始”的循环方式。理解每种方法的优劣,比死记硬背一个“最佳”方案要重要得多。

相关专题

更多
python开发工具
python开发工具

php中文网为大家提供各种python开发工具,好的开发工具,可帮助开发者攻克编程学习中的基础障碍,理解每一行源代码在程序执行时在计算机中的过程。php中文网还为大家带来python相关课程以及相关文章等内容,供大家免费下载使用。

753

2023.06.15

python打包成可执行文件
python打包成可执行文件

本专题为大家带来python打包成可执行文件相关的文章,大家可以免费的下载体验。

636

2023.07.20

python能做什么
python能做什么

python能做的有:可用于开发基于控制台的应用程序、多媒体部分开发、用于开发基于Web的应用程序、使用python处理数据、系统编程等等。本专题为大家提供python相关的各种文章、以及下载和课程。

758

2023.07.25

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

618

2023.07.31

python教程
python教程

Python已成为一门网红语言,即使是在非编程开发者当中,也掀起了一股学习的热潮。本专题为大家带来python教程的相关文章,大家可以免费体验学习。

1262

2023.08.03

python环境变量的配置
python环境变量的配置

Python是一种流行的编程语言,被广泛用于软件开发、数据分析和科学计算等领域。在安装Python之后,我们需要配置环境变量,以便在任何位置都能够访问Python的可执行文件。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

547

2023.08.04

python eval
python eval

eval函数是Python中一个非常强大的函数,它可以将字符串作为Python代码进行执行,实现动态编程的效果。然而,由于其潜在的安全风险和性能问题,需要谨慎使用。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

577

2023.08.04

scratch和python区别
scratch和python区别

scratch和python的区别:1、scratch是一种专为初学者设计的图形化编程语言,python是一种文本编程语言;2、scratch使用的是基于积木的编程语法,python采用更加传统的文本编程语法等等。本专题为大家提供scratch和python相关的文章、下载、课程内容,供大家免费下载体验。

707

2023.08.11

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

0

2026.01.15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 0.7万人学习

Django 教程
Django 教程

共28课时 | 3.1万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号