在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]// 多个数组的话，可以链式调用或者用 reduceconst 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()); // 初始值是一个空的Setconsole.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是idconst 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
之所以成为处理数组去重的首选，原因非常直接：
原生高效：
Set
是JavaScript引擎的原生实现，底层通常由高度优化的C++代码支撑。这意味着它的添加（
add
）、删除（
delete
）和检查是否存在（
has
）操作，在平均情况下都接近
O(1)
的时间复杂度。相比于手动循环加
indexOf
或
includes
（
O(N)
），
Set
在处理大量数据时有着压倒性的性能优势。语义清晰：
Set
的设计初衷就是为了存储“唯一值”的集合。当你看到代码中使用了
Set
，你立刻就能明白其意图是去重，这比一些复杂的
filter
或
reduce
组合要直观得多。API简洁： 配合展开运算符
...
和
Array.from()
，代码写起来非常简洁，一行代码就能完成合并和去重。
// 简洁且高效const arrA = ['apple', 'banana'];const arrB = ['banana', 'orange'];const result = [...new Set([...arrA, ...arrB])];console.log(result); // ['apple', 'banana', 'orange']
然而，
Set
也有它不得不面对的局限性，这也是我们在实际开发中需要特别注意的地方：
对象引用问题： 这是
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引用不同
这在处理需要基于内容去重的复杂数据结构时，会让你感到有些头疼。
顺序稳定性（部分情况）： 虽然现代JavaScript引擎通常会保持
Set
中元素的插入顺序，但ECMAScript规范实际上并没有严格保证这一点。但在绝大多数实际应用中，你可以信赖
Set
会保持插入顺序。这通常不是一个大问题，但了解一下总没坏处。
老旧环境兼容性： 如果你的项目需要支持非常老旧的浏览器（比如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，对象为valueconst 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
方案，或者必要时的深比较，才是更稳妥的选择。
以上就是js 如何用union合并数组并去重的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1515160.html
微信扫一扫 
支付宝扫一扫 
