js如何合并两个数组去重

在javascript中合并两个数组并去除重复项，最简洁高效的方法是使用set结合展开运算符。1. 对于原始类型值，直接使用[...new set([...arr1, ...arr2])]即可完成合并与去重，set会自动处理唯一性，包括将nan视为单一值；2. 对于对象数组，因set基于引用判断相等，需采用基于唯一id的map去重法：遍历合并后的数组，以对象id为键存入map，后出现的同id对象会覆盖前者，最后转回数组；3. 也可尝试json.stringify序列化对象后用set去重，但该方法受限于属性顺序、不可序列化值（如函数、undefined）及循环引用问题，适用场景有限；4. 性能上，set和map方案平均时间复杂度为o(n)，远优于循环嵌套indexof的o(n²)，优化关键在于选择合适算法：原始类型用set，对象类型优先基于唯一id使用map，并避免对无重复数据做冗余去重操作。该策略兼顾效率、可读性与实用性，是处理数组合并去重的推荐方案。

在JavaScript中合并两个数组并去除重复项，通常最简洁且高效的方法是利用

Set

...

合并和去重数组，我通常会倾向于使用

Set

function mergeAndDeduplicateArrays(arr1, arr2) {
  // 使用展开运算符合并数组，然后通过Set自动去重
  const combinedSet = new Set([...arr1, ...arr2]);
  // 将Set转换回数组
  return Array.from(combinedSet);
  // 或者更简洁地：return [...new Set([...arr1, ...arr2])];
}

// 示例
const arrayA = [1, 2, 3, 4, 'a', 'b', null, undefined];
const arrayB = [3, 4, 5, 6, 'b', 'c', null, undefined, NaN]; // NaN会被视为一个，但两个NaN是不同的

const result = mergeAndDeduplicateArrays(arrayA, arrayB);
console.log(result); // [1, 2, 3, 4, 'a', 'b', null, undefined, 5, 6, 'c', NaN]

这个方法对于数字、字符串、布尔值、

null

undefined

Set

NaN

Set

为什么Set是处理数组去重合并的优选方案？

在我看来，

Set

首先，

Set

Set

其次，从性能角度看，

Set

Set

indexOf

includes

再者，

Set

NaN

undefined

NaN

Set

NaN

Set

NaN

Set

NaN

总的来说，

Set

合并去重时，如何处理数组中包含对象的情况？

这是一个常见的“坑”，也是

Set

Set

Set

===

Set

比如：

[{id: 1, name: 'A'}]

[{id: 1, name: 'A'}]

Set

要解决这个问题，我们需要引入一些自定义的逻辑，核心思路是：定义“重复”的标准。通常，我们会基于对象的一个或多个唯一属性（比如

id

uuid

key

以下是几种处理策略：

1. 基于唯一ID属性去重（推荐且常用） 这是最常见也最实用的方法。如果你的对象都有一个唯一的标识符（如

   id

   ），你可以利用这个

   id

   来判断对象是否重复。

   function mergeAndDeduplicateObjectsById(arr1, arr2) {
     const combined = [...arr1, ...arr2];
     const uniqueMap = new Map(); // 使用Map来存储唯一的对象，key为id
   
     for (const item of combined) {
       if (item && item.id !== undefined) { // 确保对象存在且有id属性
         // 如果Map中没有这个id，或者新对象的版本更“新”（根据业务逻辑决定）
         // 这里我们简单地以id为key存储，后来的同id对象会覆盖前面的
         uniqueMap.set(item.id, item);
       }
     }
     return Array.from(uniqueMap.values());
   }
   
   const arrObj1 = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];
   const arrObj2 = [{id: 2, name: 'Robert'}, {id: 3, name: 'Charlie'}];
   
   const resultObj = mergeAndDeduplicateObjectsById(arrObj1, arrObj2);
   // 结果可能取决于你希望保留哪个同ID对象，这里是后者覆盖前者
   console.log(resultObj);
   // 预期输出：[{id: 1, name: 'Alice'}, {id: 2, name: 'Robert'}, {id: 3, name: 'Charlie'}]

   这种方法高效，因为

   Map

   的

   Set

   和

   get

   操作也是接近O(1)的平均时间复杂度。
   

   A+响应式布局后台模板

   A+是一个完全响应式，基于Bootstrap3.3.7最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对

   下载

2. 将对象转换为字符串去重（适用于简单、可序列化对象） 如果你确定对象的所有属性都是可JSON序列化的，并且属性顺序不影响唯一性判断，可以考虑将对象

   JSON.stringify

   成字符串，然后用

   Set

   去重字符串。

   function mergeAndDeduplicateObjectsByStringify(arr1, arr2) {
     const combined = [...arr1, ...arr2];
     const uniqueStrings = new Set();
     const uniqueObjects = [];
   
     for (const item of combined) {
       try {
         const itemString = JSON.stringify(item);
         if (!uniqueStrings.has(itemString)) {
           uniqueStrings.add(itemString);
           uniqueObjects.push(item);
         }
       } catch (e) {
         console.warn("无法序列化对象，跳过:", item, e);
         // 处理不可序列化的对象，比如包含循环引用
       }
     }
     return uniqueObjects;
   }
   
   const arrObj3 = [{a:1, b:2}, {b:2, a:1}, {c:3}]; // 注意：JSON.stringify对属性顺序敏感
   const arrObj4 = [{a:1, b:2}, {d:4}];
   
   // 如果属性顺序不同，即使内容一样，也会被认为是不同的
   // [{a:1, b:2}] 和 [{b:2, a:1}] 可能会被认为是两个不同的字符串
   const resultStr = mergeAndDeduplicateObjectsByStringify(arrObj3, arrObj4);
   console.log(resultStr);

   局限性：

   JSON.stringify

   对属性的顺序是敏感的，

   {a:1, b:2}

   和

   {b:2, a:1}

   会被序列化成不同的字符串。此外，它不能处理循环引用、函数、

   undefined

   等非JSON值。因此，这种方法只适用于结构非常简单且可控的对象。

选择哪种方法，取决于你的具体业务场景和对象结构。通常，基于唯一ID属性的去重是最健壮和推荐的方案。

合并去重操作对性能有什么影响？我们应该如何优化？

合并和去重操作的性能影响，很大程度上取决于你选择的算法、数组的大小以及数组中元素的类型。理解这些影响，能帮助我们做出更明智的优化决策。

性能影响分析：

1. 时间复杂度：

   • Set

     方法（针对原始类型）： 通常是O(N)，其中N是合并后数组的总元素数。这是因为

     Set

     的插入和查找操作平均是常数时间。这是最理想的情况。
   • 基于

     Map

     的ID去重（针对对象）： 同样接近O(N)。通过对象的唯一ID作为

     Map

     的键，查找和插入效率很高。
   • 循环

     +

     indexOf

     /

     includes

     ： 这是效率最低的常见方法，时间复杂度为O(N^2)。每添加一个元素，都需要遍历已处理的部分来检查是否重复。当N很大时，性能会急剧下降。

   • JSON.stringify

     后

     Set

     去重： 涉及到字符串化（O(K) K为对象属性数）和字符串的哈希计算（可能与字符串长度有关），整体性能介于O(N)和O(N^2)之间，取决于对象的复杂度和数量。

2. 内存占用：

   • Set

     和

     Map

     都需要额外的内存来存储其内部数据结构。对于非常大的数组，这可能会是一个考虑因素，但通常在现代浏览器环境中不是瓶颈。

   • JSON.stringify

     会创建新的字符串副本，也增加了临时内存消耗。

优化策略：

1. 选择正确的算法：

   • 优先使用

     Set

     和展开运算符来处理包含原始类型（数字、字符串、布尔值等）的数组去重。这是最直接、最高效的方案。
   • 对于包含对象的数组，务必使用基于唯一标识符（如

     id

     ）的

     Map

     或自定义遍历逻辑去重。 避免直接将对象放入

     Set

     ，因为它只会比较引用。

2. 避免不必要的去重：

   • 如果数据来源本身就保证了唯一性，或者你只关心合并而不关心去重，那就不要进行去重操作。
   • 在某些场景下，如果数据量非常大且频繁进行合并去重，可以考虑增量更新。只对新增或变化的部分进行去重，而不是每次都处理整个数据集。

3. 考虑数据结构的设计：

   • 在后端或数据源层面就保证数据的唯一性，减少前端去重的负担。例如，数据库查询结果就避免重复。
   • 如果对象去重是常见需求，确保你的对象有一个明确且易于访问的唯一ID。

4. 性能瓶颈分析：

   • 对于性能敏感的应用，如果发现合并去重是瓶颈，可以使用浏览器开发者工具（如Chrome DevTools的Performance面板）进行剖析，找出具体是哪一步耗时最多。有时候，瓶颈可能不在去重本身，而在前置的数据处理或后置的DOM操作。

总的来说，对于JS数组的合并去重，我的经验是：对于原始类型，

Set

Map