JS数组合并去重技巧全解析

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《JS数组合并去重方法详解》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

在JavaScript中合并数组并去重，最推荐的方法是使用Set结合展开运算符，1. 对于基本数据类型，直接使用[...new Set([...arr1, ...arr2])]即可高效去重；2. 对于对象数组，需基于唯一标识属性利用Map实现去重，如通过对象的id作为key进行覆盖或保留策略；3. 当无唯一标识时，可采用深比较或序列化为字符串的方式，但需注意性能开销与属性顺序、循环引用等限制；该方法之所以首选，是因为Set具有原生高效、语义清晰和API简洁的优势，其局限性主要体现在对象引用比较、老旧浏览器兼容性及复杂对象去重需自定义逻辑等方面，因此处理基本类型时推荐使用Set，处理复杂对象时应结合Map或深比较策略以确保正确性。

在JavaScript中，要合并数组并去除重复项，最直接且推荐的方法是利用Set数据结构。它天然支持存储唯一值，结合展开运算符（...）能高效地完成这项任务。当然，也有其他手动实现的方式，但效率和简洁性通常不如Set。

解决方案

谈到JavaScript里数组的“并集”操作，并且还要去重，我个人觉得，Set对象简直是为这个场景量身定做的。它最大的特点就是成员都是唯一的，你往里面加多少个重复的值，它也只保留一个。

方法一：利用 Set 对象（推荐且最常见）

这是我处理这类问题时的首选。思路很简单：先把所有数组扁平化到一个临时数组里，然后把这个临时数组扔进 Set，最后再把 Set 转换回数组。

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
const arr3 = [6, 7, 8, 1];

// 步骤：合并所有数组，创建Set，再转回数组
const combinedAndUniqueArray = Array.from(new Set([...arr1, ...arr2, ...arr3]));

console.log(combinedAndUniqueArray); // 输出: [1, 2, 3, 4, 5, 6, 7, 8]

// 或者更简洁一点，如果只合并两个：
const newArr1 = [1, 2, 3];
const newArr2 = [3, 4, 5];
const unionSetResult = [...new Set([...newArr1, ...newArr2])];
console.log(unionSetResult); // 输出: [1, 2, 3, 4, 5]

这种方式对于基本数据类型（字符串、数字、布尔值、null、undefined、Symbol）的去重非常高效和可靠。

方法二：手动迭代与 indexOf/includes 检查

在 Set 出现之前，或者在某些老旧环境不支持 Set 的情况下，我们可能会写一些手动循环来完成。这种方法虽然直观，但效率通常不如 Set，特别是当数组非常大时。

function mergeAndDeduplicateManual(arrA, arrB) {
  const result = [...arrA]; // 先把第一个数组的元素都放进来

  for (const item of arrB) {
    if (result.indexOf(item) === -1) { // 如果结果数组中还没有这个元素
      result.push(item); // 就加进去
    }
  }
  return result;
}

const manualArr1 = [10, 20, 30];
const manualArr2 = [20, 40, 50];
console.log(mergeAndDeduplicateManual(manualArr1, manualArr2)); // 输出: [10, 20, 30, 40, 50]

// 多个数组的话，可以链式调用或者用 reduce
const allArrays = [[1, 2], [2, 3], [3, 4]];
const mergedAllManual = allArrays.reduce((acc, currentArr) => {
  for (const item of currentArr) {
    if (!acc.includes(item)) {
      acc.push(item);
    }
  }
  return acc;
}, []);
console.log(mergedAllManual); // 输出: [1, 2, 3, 4]

每次 indexOf 或 includes 都会遍历 result 数组，这在性能上是 O(N) 的操作，所以整体复杂度会变成 O(N*M) （N是结果数组大小，M是待合并数组大小），而 Set 的 add 操作平均是 O(1)。

方法三：利用 reduce 结合 Set (更函数式)

这个方法其实是 Set 方法的一个变种，只是用 reduce 来处理多个数组的合并过程，看起来会更函数式一些。

const list1 = [1, 2, 3];
const list2 = [3, 4, 5];
const list3 = [5, 6, 7];

const allLists = [list1, list2, list3];

const uniqueCombined = allLists.reduce((accSet, currentArray) => {
  currentArray.forEach(item => accSet.add(item)); // 将当前数组的每个元素添加到Set中
  return accSet;
}, new Set()); // 初始值是一个空的Set

console.log(Array.from(uniqueCombined)); // 输出: [1, 2, 3, 4, 5, 6, 7]

我个人觉得，当你有一堆数组需要合并去重时，reduce 配合 Set 这种写法，既保持了 Set 的高效，又让代码看起来非常紧凑和优雅。

JavaScript中合并数组并去重的最佳实践是什么？

在我看来，JavaScript中合并数组并去重的“最佳实践”很大程度上取决于你数组里装的是什么东西。如果都是基本数据类型（数字、字符串、布尔值等），那毫无疑问，Set 对象就是你的不二之选。它的简洁、高效和浏览器原生支持，让它在处理这类问题时几乎没有对手。

const numbers1 = [1, 2, 3, 2];
const numbers2 = [3, 4, 5, 4];
const uniqueNumbers = [...new Set([...numbers1, ...numbers2])];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

但如果你的数组里包含了复杂对象，事情就变得有点意思了。Set 的“唯一性”判断是基于值的引用（reference），而不是内容。这意味着，即使两个对象长得一模一样，只要它们在内存中的地址不同，Set 就会把它们当作两个独立的元素。

const obj1 = { id: 1, name: 'A' };
const obj2 = { id: 2, name: 'B' };
const obj3 = { id: 1, name: 'A' }; // 内容和obj1一样，但引用不同

const objectArray = [obj1, obj2, obj3];
const uniqueObjectsByReference = [...new Set(objectArray)];
console.log(uniqueObjectsByReference);
// 输出: [{ id: 1, name: 'A' }, { id: 2, name: 'B' }, { id: 1, name: 'A' }]
// 注意，obj1和obj3都被保留了，因为它们是不同的对象实例

这种情况下，你需要定义自己的“唯一性”标准。通常，我们会基于对象的一个或多个属性来判断。比如，如果你的对象都有一个唯一的 id 字段，那么你可以用 Map 或者 reduce 来实现去重：

const users1 = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const users2 = [{ id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }];

// 使用 Map 来存储唯一的对象，key是id
const uniqueUsersMap = new Map();
[...users1, ...users2].forEach(user => {
  uniqueUsersMap.set(user.id, user); // 如果id相同，新的会覆盖旧的
});

const uniqueUsers = Array.from(uniqueUsersMap.values());
console.log(uniqueUsers);
// 输出: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]

我个人觉得，处理对象数组时，这种基于 Map 的策略非常实用，因为它不仅能去重，还能让你决定保留哪个重复项（比如，新来的覆盖旧的，或者旧的优先）。

为什么Set是处理数组去重的首选方法，它有哪些局限性？

Set 之所以成为处理数组去重的首选，原因非常直接：

1. 原生高效： Set 是JavaScript引擎的原生实现，底层通常由高度优化的C++代码支撑。这意味着它的添加（add）、删除（delete）和检查是否存在（has）操作，在平均情况下都接近 O(1) 的时间复杂度。相比于手动循环加 indexOf 或 includes （O(N)），Set 在处理大量数据时有着压倒性的性能优势。
2. 语义清晰： Set 的设计初衷就是为了存储“唯一值”的集合。当你看到代码中使用了 Set，你立刻就能明白其意图是去重，这比一些复杂的 filter 或 reduce 组合要直观得多。
3. API简洁： 配合展开运算符 ... 和 Array.from()，代码写起来非常简洁，一行代码就能完成合并和去重。

// 简洁且高效
const arrA = ['apple', 'banana'];
const arrB = ['banana', 'orange'];
const result = [...new Set([...arrA, ...arrB])];
console.log(result); // ['apple', 'banana', 'orange']

然而，Set 也有它不得不面对的局限性，这也是我们在实际开发中需要特别注意的地方：

1. 对象引用问题： 这是 Set 最常被提及的“坑”。正如前面提到的，Set 判断两个对象是否“相同”，是基于它们在内存中的引用地址。这意味着，即使两个对象的所有属性值都一样，但如果它们是不同的实例，Set 也会认为它们是两个独立的元素。

   const item1 = { name: 'Book', price: 20 };
   const item2 = { name: 'Book', price: 20 }; // 内容相同，但不是同一个对象实例
   const uniqueItems = [...new Set([item1, item2])];
   console.log(uniqueItems.length); // 2，因为item1和item2引用不同

   这在处理需要基于内容去重的复杂数据结构时，会让你感到有些头疼。

2. 顺序稳定性（部分情况）： 虽然现代JavaScript引擎通常会保持 Set 中元素的插入顺序，但ECMAScript规范实际上并没有严格保证这一点。但在绝大多数实际应用中，你可以信赖 Set 会保持插入顺序。这通常不是一个大问题，但了解一下总没坏处。

3. 老旧环境兼容性： 如果你的项目需要支持非常老旧的浏览器（比如IE11），那么 Set 可能需要 polyfill。不过，在当前主流的开发环境中，这已经不是什么大问题了。

所以，用 Set 处理基本数据类型的数组去重，放心大胆地用；遇到对象数组，就得停下来思考一下，你的“去重”标准到底是什么。

如何在合并数组时处理包含复杂对象的去重问题？

处理包含复杂对象的数组去重，确实比处理基本类型要复杂一些，因为我们不能简单依赖 Set 的引用比较。核心思路是：我们需要定义一个“唯一标识”或者“比较规则”。

策略一：利用对象的唯一标识属性（最常用且推荐）

如果你的对象有一个或多个属性可以作为其唯一标识（比如 id、sku、uuid 等），那么我们就可以利用这个标识来去重。我个人最喜欢用 Map 来实现这个逻辑。

const productsA = [{ id: 'p001', name: 'Laptop' }, { id: 'p002', name: 'Mouse' }];
const productsB = [{ id: 'p002', name: 'Mouse Pro' }, { id: 'p003', name: 'Keyboard' }];

// 创建一个Map，以id为key，对象为value
const uniqueProductsMap = new Map();

// 合并所有产品，并用Map去重
[...productsA, ...productsB].forEach(product => {
  // Map的set方法会覆盖同名的key，这正是我们想要的去重效果
  // 这里选择保留后出现的重复项（Mouse Pro会覆盖Mouse）
  uniqueProductsMap.set(product.id, product);
});

const uniqueProducts = Array.from(uniqueProductsMap.values());
console.log(uniqueProducts);
/*
输出:
[
  { id: 'p001', name: 'Laptop' },
  { id: 'p002', name: 'Mouse Pro' }, // 注意这里是Mouse Pro，因为后来的覆盖了
  { id: 'p003', name: 'Keyboard' }
]
*/

// 如果你想保留先出现的重复项，可以这样写：
const uniqueProductsMapPreserveFirst = new Map();
[...productsA, ...productsB].forEach(product => {
  if (!uniqueProductsMapPreserveFirst.has(product.id)) {
    uniqueProductsMapPreserveFirst.set(product.id, product);
  }
});
const uniqueProductsPreserveFirst = Array.from(uniqueProductsMapPreserveFirst.values());
console.log(uniqueProductsPreserveFirst);
/*
输出:
[
  { id: 'p001', name: 'Laptop' },
  { id: 'p002', name: 'Mouse' }, // 这里是Mouse，因为先出现的被保留了
  { id: 'p003', name: 'Keyboard' }
]
*/

这种方式非常灵活，你可以根据业务需求决定是保留第一次出现的重复项，还是最后一次出现的。

策略二：深比较（Deep Comparison）

如果你的对象没有一个简单的唯一 id，或者你需要根据对象的所有属性值来判断是否重复，那就需要进行深比较了。这通常意味着你需要遍历对象的每一个属性，甚至递归地比较嵌套对象或数组。

// 这是一个简化的深比较函数示例，实际情况可能需要更健壮的库
function isEqualDeep(obj1, obj2) {
  if (obj1 === obj2) return true; // 相同引用或基本类型值相等

  if (typeof obj1 !== 'object' || obj1 === null ||
      typeof obj2 !== 'object' || obj2 === null) {
    return false; // 类型不同或不是对象
  }

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) return false;

  for (const key of keys1) {
    if (!keys2.includes(key) || !isEqualDeep(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}

const itemA = { name: 'Shirt', color: 'blue', sizes: ['M', 'L'] };
const itemB = { name: 'Shirt', color: 'red', sizes: ['M', 'L'] };
const itemC = { name: 'Shirt', color: 'blue', sizes: ['M', 'L'] }; // 内容与itemA相同

const clothes = [itemA, itemB, itemC];
const uniqueClothes = [];

clothes.forEach(currentItem => {
  const isDuplicate = uniqueClothes.some(existingItem => isEqualDeep(existingItem, currentItem));
  if (!isDuplicate) {
    uniqueClothes.push(currentItem);
  }
});

console.log(uniqueClothes);
/*
输出:
[
  { name: 'Shirt', color: 'blue', sizes: ['M', 'L'] },
  { name: 'Shirt', color: 'red', sizes: ['M', 'L'] }
]
*/

深比较的缺点是性能开销较大，特别是当对象结构复杂或数组非常大时。在生产环境中，我通常会倾向于使用成熟的库（比如Lodash的 _.isEqual）来处理深比较，因为它们考虑了各种边缘情况，比如循环引用、不同类型值的比较等。

策略三：序列化为字符串再去重（简单但有局限性）

对于那些结构相对简单，且属性顺序不影响比较的对象，可以考虑将其序列化为JSON字符串，然后利用 Set 对字符串去重。

const data1 = { a: 1, b: 'x' };
const data2 = { b: 'x', a: 1 }; // 属性顺序不同，但内容相同
const data3 = { a: 2, b: 'y' };

const rawData = [data1, data2, data3];

// 注意：JSON.stringify对属性顺序敏感，这可能导致去重失败
// 比如 {a:1, b:2} 和 {b:2, a:1} 序列化结果不同
const uniqueStrings = new Set(rawData.map(item => JSON.stringify(item)));

const finalUniqueData = Array.from(uniqueStrings).map(str => JSON.parse(str));
console.log(finalUniqueData);
/*
输出:
[
  { a: 1, b: 'x' },
  { b: 'x', a: 1 }, // data1和data2都被保留了，因为JSON.stringify对属性顺序敏感
  { a: 2, b: 'y' }
]
*/

// 如果要解决属性顺序问题，可能需要先对对象属性进行排序
function stableStringify(obj) {
  return JSON.stringify(Object.keys(obj).sort().reduce((sortedObj, key) => {
    sortedObj[key] = obj[key];
    return sortedObj;
  }, {}));
}

const uniqueStringsStable = new Set(rawData.map(item => stableStringify(item)));
const finalUniqueDataStable = Array.from(uniqueStringsStable).map(str => JSON.parse(str));
console.log(finalUniqueDataStable);
/*
输出:
[
  { a: 1, b: 'x' }, // data1和data2现在被视为重复，只保留了一个
  { a: 2, b: 'y' }
]
*/

这个方法虽然看起来简单，但它的局限性非常明显：

• 属性顺序： JSON.stringify 对对象属性的顺序是敏感的，如果两个逻辑上相同的对象属性顺序不同，它们会被视为不同的字符串。需要额外的处理来保证属性顺序一致性（如上面 stableStringify 所示）。
• 不支持循环引用： 如果对象中有循环引用，JSON.stringify 会报错。
• 不支持函数、undefined、Symbol： 这些类型在序列化时会被忽略或转换为 null。

所以，我通常只会在对象结构非常简单、确定没有特殊类型和循环引用，且对性能有较高要求时，才会考虑这种“暴力”的序列化去重法。大多数时候，基于唯一标识的 Map 方案，或者必要时的深比较，才是更稳妥的选择。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。