boxmoe_header_banner_img

Hello! 欢迎来到悠悠畅享网!

文章导读

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


avatar
作者 2025年8月24日 16

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

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

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

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<Object>} arr1 第一个对象数组  * @param {Array<Object>} arr2 第二个对象数组  * @param {string} key 用于比较对象的唯一键名 (e.g., 'id', 'name')  * @returns {Array<Object>} 两个数组的交集对象  */ 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

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



评论(已关闭)

评论已关闭