JavaScript数组并集的实现方法

在JavaScript中，数组并集操作是将多个数组合并成一个新数组，其中包含所有不重复的元素。实现这一操作最有效的方法是利用ES6的Set对象，它能高效去重并合并数组，代码简洁且性能最优，尤其适用于原始值类型的数组。本文将深入探讨如何使用Set对象实现JavaScript数组并集，并对比手动通过`filter`与`indexOf`组合实现的方法，以及针对对象数组如何基于特定属性进行去重，介绍使用Map或reduce结合辅助对象的方法，实现更灵活的业务逻辑扩展。了解数组并集、交集、差集操作的区别，能帮助你更精准地处理数据，优化JavaScript代码。

JavaScript数组并集操作的最有效方法是使用Set对象，1. 使用Set可高效去重并合并数组，代码简洁且性能最优，适用于原始值类型；2. 手动通过filter与indexOf组合可实现兼容性更好的去重，但时间复杂度为O((N+M)^2)，不适合大数据量；3. 对于对象数组，需基于特定属性（如id）进行去重，应使用Map或reduce结合辅助对象，以属性值为键存储唯一对象，从而实现精准去重；该方法灵活支持业务逻辑扩展，如保留先出现项或合并属性，最终返回去重后的并集数组。

JavaScript数组实现并集操作，说白了，就是把两个或多个数组里的所有不重复的元素都收集起来，形成一个新的数组。最直接、也最推荐的做法是利用ES6的Set对象，因为它天生就是用来处理唯一值的集合。当然，如果考虑兼容性或者想手动控制更多细节，也可以通过一些数组方法组合来实现。

解决方案

在我看来，处理数组并集，最优雅且高效的方式，非Set莫属。它简直是为去重而生的。

方法一：使用Set对象（推荐）

这是最现代、最简洁也通常是最高效的方法。Set对象允许你存储任何类型的唯一值，无论是原始值还是对象引用。

function getUnionWithSet(arr1, arr2) {
  // 先把两个数组合并成一个大数组
  const combined = [...arr1, ...arr2];
  // 然后把这个大数组扔进Set，Set会自动帮你去重
  const uniqueElements = new Set(combined);
  // 最后再把Set转换回数组
  return Array.from(uniqueElements);
  // 或者更简洁地写成：return [...new Set([...arr1, ...arr2])];
}

const arrA = [1, 2, 3, 4];
const arrB = [3, 4, 5, 6];
console.log('Set方法并集:', getUnionWithSet(arrA, arrB)); // 输出: [1, 2, 3, 4, 5, 6]

const arrC = ['apple', 'banana', 'orange'];
const arrD = ['banana', 'grape', 'apple'];
console.log('Set方法并集:', getUnionWithSet(arrC, arrD)); // 输出: ["apple", "banana", "orange", "grape"]

这种方式的优点是代码量少，可读性高，而且对于大量数据，Set内部的哈希表实现让查找和插入的效率很高。

方法二：结合filter和concat

如果你暂时不想用Set，或者需要支持一些非常老的浏览器环境（虽然现在很少见了），那么手动去重也是一种选择。

function getUnionManually(arr1, arr2) {
  // 首先，把两个数组简单地连接起来
  const combined = arr1.concat(arr2);

  // 接着，遍历这个合并后的数组，只保留第一次出现的元素
  const union = combined.filter((item, index, self) => {
    // 如果当前元素的索引等于它第一次出现的索引，就说明它是唯一的
    return self.indexOf(item) === index;
  });

  return union;
}

const arrA = [1, 2, 3, 4];
const arrB = [3, 4, 5, 6];
console.log('手动去重并集:', getUnionManually(arrA, arrB)); // 输出: [1, 2, 3, 4, 5, 6]

这种方法虽然直观，但效率上，特别是当数组非常大时，indexOf在每次迭代中都会遍历数组，导致整体时间复杂度较高，不如Set。

方法三：利用reduce和对象/哈希表（处理特定场景，如对象去重）

虽然不是纯粹的并集操作，但当涉及到数组中包含对象，且需要根据对象的某个属性来判断唯一性时，reduce结合一个辅助对象或Map会非常有用。

function getUnionWithReduce(arr1, arr2) {
  const combined = [...arr1, ...arr2];
  const seen = {}; // 用来记录已经见过的元素
  const union = combined.reduce((acc, current) => {
    if (!seen[current]) { // 如果这个元素还没被记录过
      seen[current] = true; // 标记为已记录
      acc.push(current); // 添加到结果数组
    }
    return acc;
  }, []); // 初始值是一个空数组
  return union;
}

const arrA = [1, 2, 3, 4];
const arrB = [3, 4, 5, 6];
console.log('Reduce方法并集:', getUnionWithReduce(arrA, arrB)); // 输出: [1, 2, 3, 4, 5, 6]

这种方法对于原始值（数字、字符串）也能工作，但它的真正价值在于，你可以修改if (!seen[current])这部分逻辑，来处理更复杂的去重规则，比如基于对象的id属性。

JavaScript数组并集操作的性能考量与最佳实践是什么？

谈到性能，这事儿可不是小打小闹。在JavaScript里搞数组操作，尤其当数据量上来的时候，选对方法能让你事半功倍，否则可能就是卡顿、崩溃的噩梦。

性能对比：

1. Set方法：
   • 优点： 效率最高，尤其处理大数据量时优势明显。Set内部实现通常基于哈希表（Hash Table），添加和查找元素的平均时间复杂度接近O(1)。所以，将所有元素放入Set再转回数组，整体时间复杂度大致是O(N+M)，其中N和M是两个数组的长度。
   • 缺点： 无法直接处理需要根据某个特定属性去重的对象（Set默认使用===进行比较，这意味着{id:1}和另一个{id:1}是不同的对象）。
2. filter + indexOf方法：
   • 优点： 代码直观，易于理解，不需要ES6特性（虽然现在ES6普及率很高了）。
   • 缺点： 性能较差。indexOf方法在每次迭代时，都需要从数组开头遍历到当前元素，寻找其第一次出现的位置。如果数组长度是L，那么最坏情况下，indexOf的复杂度是O(L)。整个filter操作下来，时间复杂度会达到O(L^2)，也就是O((N+M)^2)。对于大数组，这几乎是灾难性的。
3. reduce + 辅助对象/Map方法：
   • 优点： 性能较好，接近Set，因为对象属性查找和Map的has/set操作通常是O(1)的。更重要的是，它能灵活处理基于对象属性的去重。
   • 缺点： 代码相对复杂一点，需要维护一个额外的seen对象或Map。

最佳实践：

• 优先使用Set： 对于包含原始值（数字、字符串、布尔值）的数组并集操作，毫无疑问，Set是最佳选择。它的简洁和高效是其他方法难以比拟的。现代浏览器对Set的支持也非常好，几乎没有兼容性问题。
• 处理对象数组并集： 如果你的数组里装的是对象，并且你需要根据对象的某个特定属性（比如id、name）来判断唯一性，那么Set就无能为力了。这时，我通常会选择reduce结合一个Map对象来解决。Map比普通对象在键值对操作上更强大，键可以是任何类型，而不仅仅是字符串。

// 针对对象数组的并集去重（基于id属性）
function getUnionOfObjectsById(arr1, arr2) {
  const combined = [...arr1, ...arr2];
  const uniqueMap = new Map(); // 使用Map来存储唯一的对象，key是id，value是对象本身

  combined.forEach(item => {
    if (item && item.id !== undefined) { // 确保item和id存在
      uniqueMap.set(item.id, item); // 用id作为key，如果id相同，后面的会覆盖前面的
    }
  });

  return Array.from(uniqueMap.values()); // 获取Map中所有的值（即去重后的对象）
}

const users1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
const users2 = [{id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}];
console.log('对象数组并集:', getUnionOfObjectsById(users1, users2));
// 输出: [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]

这个例子就完美解决了Set无法直接处理对象去重的问题。

如何处理包含对象的JavaScript数组并集去重问题？

这确实是个高频问题，因为现实世界的数据往往不是简单的数字或字符串，更多的是结构化的对象。前面也提到了，Set对象在默认情况下是无法直接处理这种需求的，因为它比较的是对象的引用地址。也就是说，两个内容完全一样的对象，只要它们是不同的引用，Set就会把它们当作两个独立的元素。

举个例子：

const obj1 = { id: 1, name: 'Test' };
const obj2 = { id: 1, name: 'Test' };
const mySet = new Set();
mySet.add(obj1);
mySet.add(obj2);
console.log(mySet.size); // 输出 2，而不是 1

看到了吧，尽管obj1和obj2的内容一样，但Set认为它们是不同的。所以，要实现对象数组的并集去重，我们得自己定义“唯一”的标准。

解决方案：利用Map或辅助对象来跟踪唯一性

核心思想是：选择对象中的一个或多个属性作为“唯一标识符”，然后用一个Map或普通JavaScript对象来存储这些标识符，并把对应的对象作为值。当遇到一个新对象时，先检查它的标识符是否已经存在于Map中。

方法一：使用Map（推荐，因为键可以是任何类型）

Map比普通对象更适合做这种键值对存储，因为它的键可以是任何数据类型，包括对象本身（虽然这里我们用对象的某个属性作为键）。

/**
 * 获取对象数组的并集（根据指定key去重）
 * @param {Array<Object>} arr1 - 第一个对象数组
 * @param {Array<Object>} arr2 - 第二个对象数组
 * @param {string} key - 用于判断对象唯一性的属性名，例如 'id'
 * @returns {Array<Object>} 去重后的并集数组
 */
function getUnionOfObjectsByKey(arr1, arr2, key) {
  const combined = [...arr1, ...arr2];
  const uniqueMap = new Map(); // 使用Map来存储唯一对象

  combined.forEach(item => {
    if (item && item[key] !== undefined) { // 确保item存在且有指定的key
      uniqueMap.set(item[key], item); // 以key的值作为Map的键，对象本身作为值
    }
  });

  // Map的values()方法返回一个迭代器，Array.from将其转换为数组
  return Array.from(uniqueMap.values());
}

const products1 = [
  { productId: 'A001', name: 'Laptop', price: 1200 },
  { productId: 'A002', name: 'Mouse', price: 25 },
  { productId: 'A003', name: 'Keyboard', price: 75 }
];

const products2 = [
  { productId: 'A002', name: 'Mouse Pro', price: 30 }, // productId相同，但name和price不同
  { productId: 'A004', name: 'Monitor', price: 300 }
];

// 根据productId进行并集去重
const unionProducts = getUnionOfObjectsByKey(products1, products2, 'productId');
console.log('对象数组并集 (根据productId去重):', unionProducts);
/*
输出:
[
  { productId: 'A001', name: 'Laptop', price: 1200 },
  { productId: 'A002', name: 'Mouse Pro', price: 30 }, // A002被products2中的覆盖了
  { productId: 'A003', name: 'Keyboard', price: 75 },
  { productId: 'A004', name: 'Monitor', price: 300 }
]
*/

一点思考： 在上面的例子中，如果两个数组中存在相同productId的对象，Map会保留后出现的那个。这在某些场景下可能是你想要的，但在另一些场景下，你可能希望保留先出现的，或者进行某种合并。这就需要更复杂的逻辑了，比如：

// 如果要保留先出现的，或者合并属性
function getUnionAndMergeObjects(arr1, arr2, key) {
  const uniqueMap = new Map();

  // 先处理第一个数组，确保它们被添加到Map中
  arr1.forEach(item => {
    if (item && item[key] !== undefined) {
      uniqueMap.set(item[key], item);
    }
  });

  // 再处理第二个数组，如果Map中没有，就添加；如果已经有，可以决定是否覆盖或合并
  arr2.forEach(item => {
    if (item && item[key] !== undefined) {
      if (!uniqueMap.has(item[key])) { // 如果Map中没有这个key，就添加
        uniqueMap.set(item[key], item);
      } else {
        // 如果有，这里可以添加合并逻辑，例如：
        // const existingItem = uniqueMap.get(item[key]);
        // uniqueMap.set(item[key], { ...existingItem, ...item }); // 简单合并属性
      }
    }
  });

  return Array.from(uniqueMap.values());
}

// 示例：保留先出现的
const unionProductsPreserveFirst = getUnionAndMergeObjects(products1, products2, 'productId');
console.log('对象数组并集 (保留先出现的):', unionProductsPreserveFirst);
/*
输出:
[
  { productId: 'A001', name: 'Laptop', price: 1200 },
  { productId: 'A002', name: 'Mouse', price: 25 }, // A002保留了products1中的
  { productId: 'A003', name: 'Keyboard', price: 75 },
  { productId: 'A004', name: 'Monitor', price: 300 }
]
*/

这展示了处理对象数组的灵活性，你需要根据具体的业务需求来决定如何处理冲突。

JavaScript数组并集与交集、差集操作有何不同？

在数组操作中，“并集”、“交集”和“差集”是三个非常基础且重要的概念，它们各自代表了不同的集合逻辑。虽然它们都涉及从多个数组中提取元素，但目的和结果截然不同。理解它们的区别，能帮助你更精准地处理数据。

1. 并集 (Union)

• 定义： 两个或多个集合的所有元素组合在一起，并且去除所有重复的元素。简单来说，就是把所有参与集合的元素都收录进来，但每个元素只出现一次。

• 数学符号： A ∪ B

• 举例：

  • 数组 A = [1, 2, 3]
  • 数组 B = [3, 4, 5]
  • A 和 B 的并集 = [1, 2, 3, 4, 5]

• JavaScript实现思路：

  • 将所有数组元素合并到一个新数组。
  • 使用Set对象去除重复项。
  • 或者手动遍历并检查元素是否已存在于结果数组中。

  // 并集
  const arr1 = [1, 2, 3];
  const arr2 = [3, 4, 5];
  const union = [...new Set([...arr1, ...arr2])];
  console.log('并集:', union); // [1, 2, 3, 4, 5]

2. 交集 (Intersection)

• 定义： 两个或多个集合中共同拥有的元素。只有那些在所有参与集合中都出现的元素才会被包含在交集中。

• 数学符号： A ∩ B

• 举例：

  • 数组 A = [1, 2, 3]
  • 数组 B = [3, 4, 5]
  • A 和 B 的交集 = [3]

• JavaScript实现思路：

  • 将其中一个数组的元素放入Set中，以便快速查找。
  • 遍历另一个数组，检查其元素是否在Set中存在。
  • 或者使用filter结合includes方法。

  // 交集
  const arr1 = [1, 2, 3];
  const arr2 = [3, 4, 5];
  const set2 = new Set(arr2); // 将arr2转换为Set，方便快速查找
  const intersection = arr1.filter(item => set2.has(item));
  console.log('交集:', intersection); // [3]

3. 差集 (Difference)

• 定义： 属于第一个集合，但不属于第二个集合的元素。这通常是有方向性的，A相对于B的差集和B相对于A的差集是不同的。

• 数学符号： A \ B (A减B) 或 A - B

• 举例：

  • 数组 A = [1, 2, 3]
  • 数组 B = [3, 4, 5]
  • A 相对于 B 的差集 (A \ B) = [1, 2] （在A中但不在B中）
  • B 相对于 A 的差集 (B \ A) = [4, 5] （在B中但不在A中）

• JavaScript实现思路：

  • 将要“减去”的数组（比如B）的元素放入Set中。
  • 遍历被“减去”的数组（比如A），检查其元素是否不在Set中。

  // 差集 (A - B)
  const arr1 = [1, 2, 3];
  const arr2 = [3, 4, 5];
  const set2 = new Set(arr2);
  const differenceAB = arr1.filter(item => !set2.has(item));
  console.log('差集 (A - B):', differenceAB); // [1, 2]
  
  // 差集 (B - A)
  const set1 = new Set(arr1);
  const differenceBA = arr2.filter(item => !set1.has(item));
  console.log('差集 (B - A):', differenceBA); // [4, 5

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript数组并集的实现方法》文章吧，也可关注golang学习网公众号了解相关技术文章。