JS合并数组去重方法详解

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《JS合并两个数组不重复方法》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

合并两个数组且不去除重复项最直接的方法是使用concat()或展开运算符。1. 使用Array.prototype.concat()方法可创建新数组，不修改原数组，支持多个数组或值的合并。2. 使用展开运算符（...）语法更简洁，灵活性高，适合现代JavaScript开发，在可读性和代码简洁性上更具优势。两种方法均不处理重复项，性能差异在常规场景下可忽略，选择取决于兼容性需求或编码风格。

在JavaScript中，要合并两个数组并且不去除重复项，最直接也是我个人最常用的方法就是利用concat()方法或者ES6的展开运算符（...）。它们都能创建一个包含所有元素的新数组，原始数组保持不变，且不会对重复值进行任何特殊处理。

解决方案

合并两个数组且不去除重复项，核心在于选择一个能够简单累加元素的方法。

1. 使用 Array.prototype.concat() 方法

这是JavaScript中专门用于合并数组的内建方法。它会创建一个新数组，其中包含调用此方法的数组的元素，后跟作为参数提供的所有数组或值。它不会修改原数组，这一点我很喜欢，因为它符合函数式编程中“不可变性”的原则。

const array1 = [1, 2, 3];
const array2 = [3, 4, 5];

const mergedArray = array1.concat(array2);
// mergedArray 会是 [1, 2, 3, 3, 4, 5]
console.log(mergedArray);

const array3 = ['a', 'b'];
const array4 = ['c', 'a'];
const anotherMerged = array3.concat(array4);
// anotherMerged 会是 ['a', 'b', 'c', 'a']
console.log(anotherMerged);

你甚至可以传入多个数组或单个值：

const arrayA = [10, 20];
const arrayB = [30, 40];
const arrayC = [50];

const combined = arrayA.concat(arrayB, arrayC, 60, [70, 80]);
// combined 会是 [10, 20, 30, 40, 50, 60, 70, 80]
console.log(combined);

2. 使用展开运算符（Spread Syntax ...）

这是ES6引入的一个非常强大的语法糖，它允许一个可迭代对象（如数组）在需要多个参数（在函数调用时）或多个元素（在数组字面量时）的地方展开。在合并数组时，它简洁、直观，也是我日常开发中更倾向使用的方式。

const array1 = [1, 2, 3];
const array2 = [3, 4, 5];

const mergedArray = [...array1, ...array2];
// mergedArray 会是 [1, 2, 3, 3, 4, 5]
console.log(mergedArray);

const array3 = ['apple', 'banana'];
const array4 = ['cherry', 'apple'];
const anotherMerged = [...array3, ...array4];
// anotherMerged 会是 ['apple', 'banana', 'cherry', 'apple']
console.log(anotherMerged);

这种方式的优点在于它的灵活性。你可以在合并时轻松地插入额外的元素，或者将多个数组混合在一起，代码的可读性通常也更高。

const arrA = [1, 2];
const arrB = [3, 4];
const arrC = [5, 6];

const allCombined = [...arrA, 0, ...arrB, 99, ...arrC];
// allCombined 会是 [1, 2, 0, 3, 4, 99, 5, 6]
console.log(allCombined);

合并数组时，选择 concat() 还是展开运算符 ...？

这个问题其实经常被提起，我的经验是，大多数情况下它们的效果是等价的，尤其是在处理一般大小的数组时。但如果非要细究，它们还是有一些微妙的差异，以及各自的适用场景。

concat() 方法是Array原型上的一个方法，它的语义非常明确，就是“连接数组”。它会返回一个新的数组，不修改原数组，这对于保持数据不可变性非常有利。在老旧的浏览器环境中，或者当你需要确保代码在ES6之前的环境也能运行而不想引入转译（transpilation）时，concat()是更稳妥的选择。

展开运算符 ... 则更像是语法层面的便利。它不是一个方法，而是一种操作符，可以将可迭代对象（不仅仅是数组，还有字符串、Set、Map等）的元素“展开”到新的数组字面量、函数调用参数或对象字面量中。它的优势在于简洁性和灵活性。我个人在现代JavaScript开发中，更倾向于使用展开运算符，因为它写起来更少代码，也更容易理解“将这些元素都拿出来放进新数组”的意图。

从性能角度看，对于大多数实际应用场景，两者之间的性能差异可以忽略不计。JavaScript引擎对这两种操作都进行了高度优化。然而，理论上讲，concat()可能会在内部进行一些额外的函数调用和上下文切换，而展开运算符在编译时可能被优化得更彻底，但这种差异通常只有在处理数百万级别的超大数组时才可能显现出来，而且往往也不是瓶颈所在。

所以，我的建议是：在现代项目中，如果追求代码简洁和灵活性，用展开运算符；如果考虑到兼容性或者偏爱更函数式的表达，concat()也完全没问题。选择哪一个，更多的是个人习惯和团队规范的体现。

处理大型数组合并时，性能考量与优化策略

尽管对于大多数前端应用来说，合并数组的性能通常不是瓶颈，但如果真的遇到需要合并数百万甚至更多元素的数组，我们就需要稍微关注一下了。

无论是concat()还是展开运算符，它们都会创建一个全新的数组。这意味着如果你的原始数组非常大，这个操作会占用额外的内存来存储新数组，并且需要遍历所有元素来复制它们。这在内存受限的环境（比如某些移动设备浏览器）或者需要频繁进行此类操作时，可能会导致性能问题甚至内存溢出。

在这种极端情况下，如果允许修改原始数组，可以考虑使用push()方法将一个数组的元素逐个或批量地添加到另一个数组的末尾。这会修改第一个数组，而不是创建一个新数组，从而减少内存分配。

let largeArray1 = Array.from({length: 1000000}, (_, i) => i); // 100万个元素
const largeArray2 = Array.from({length: 1000000}, (_, i) => i + 1000000); // 另外100万个元素

// 避免创建新数组，直接修改 largeArray1
// 方法1: 使用 push.apply()
// Array.prototype.push.apply(largeArray1, largeArray2);

// 方法2: 使用展开运算符结合 push() (ES6+)
largeArray1.push(...largeArray2);

// largeArray1 现在包含所有元素，且没有创建第三个大型数组
console.log(largeArray1.length); // 2000000

需要注意的是，push.apply()和push(...largeArray2)在处理超大数组时，仍然可能遇到JavaScript引擎的栈溢出限制（"Maximum call stack size exceeded"），因为它们本质上都是将第二个数组的元素作为独立的参数传递给push方法。这个限制通常在几十万到一百万个元素之间触发，具体取决于运行环境。

如果遇到这种情况，并且必须修改原数组，那么最稳妥的方法还是使用循环分批添加：

let largeArray1 = Array.from({length: 1000000}, (_, i) => i);
const largeArray2 = Array.from({length: 1000000}, (_, i) => i + 1000000);

const chunkSize = 10000; // 每次添加的块大小
for (let i = 0; i < largeArray2.length; i += chunkSize) {
    largeArray1.push(...largeArray2.slice(i, i + chunkSize));
}
console.log(largeArray1.length); // 2000000

这种分批处理的方式可以有效避免栈溢出问题，但代码相对复杂一些。总之，在大多数日常开发中，concat()和展开运算符足够了。只有在面对极端数据量且性能成为瓶颈时，才需要考虑这些优化策略。

除了简单的合并，还有哪些场景需要对合并后的数组进行后续处理？

单纯的数组合并只是数据处理的第一步。很多时候，合并完成后，我们还需要对结果进行进一步的加工，以满足特定的业务需求。这就像是把原材料堆到一起，接下来才是精炼和塑形的过程。

1. 筛选特定条件的数据（Filtering）

合并后的数组可能包含一些我们不感兴趣或不符合业务逻辑的数据。比如，你合并了两个用户列表，但现在只想显示活跃用户或者年龄在某个范围内的用户。这时，filter()方法就派上用场了。

const userList1 = [{id: 1, name: 'Alice', status: 'active'}, {id: 2, name: 'Bob', status: 'inactive'}];
const userList2 = [{id: 3, name: 'Charlie', status: 'active'}, {id: 4, name: 'David', status: 'active'}];

const allUsers = [...userList1, ...userList2];
const activeUsers = allUsers.filter(user => user.status === 'active');

console.log(activeUsers);
// 结果：[{id: 1, name: 'Alice', status: 'active'}, {id: 3, name: 'Charlie', status: 'active'}, {id: 4, name: 'David', status: 'active'}]

2. 转换数据格式或提取特定信息（Mapping）

有时候，合并后的数组元素可能不是我们最终需要的形式。我们可能需要从每个对象中提取某个属性，或者将数据转换成另一种结构。map()方法就是为此而生。

const products1 = [{name: 'Laptop', price: 1200}, {name: 'Mouse', price: 25}];
const products2 = [{name: 'Keyboard', price: 75}, {name: 'Monitor', price: 300}];

const allProducts = [...products1, ...products2];
const productNames = allProducts.map(product => product.name);

console.log(productNames);
// 结果：['Laptop', 'Mouse', 'Keyboard', 'Monitor']

3. 统计、累加或归纳数据（Reducing）

当我们需要从合并后的数组中计算一个单一的值，比如总和、平均值，或者将所有元素归纳成一个对象时，reduce()方法就非常强大。

const salesData1 = [100, 50, 200];
const salesData2 = [75, 120, 30];

const allSales = [...salesData1, ...salesData2];
const totalSales = allSales.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(totalSales); // 结果：575

4. 排序数据（Sorting）

合并后的数据通常是按照原始数组的顺序排列的，但我们可能需要按照某个特定的标准（如字母顺序、数值大小、日期等）对它们进行排序。

const items1 = [{name: 'Banana', id: 2}, {name: 'Apple', id: 1}];
const items2 = [{name: 'Cherry', id: 3}, {name: 'Date', id: 4}];

const allItems = [...items1, ...items2];
allItems.sort((a, b) => a.name.localeCompare(b.name)); // 按名称字母顺序排序

console.log(allItems);
// 结果：[{name: 'Apple', id: 1}, {name: 'Banana', id: 2}, {name: 'Cherry', id: 3}, {name: 'Date', id: 4}]

5. 去重（De-duplication）

虽然标题要求不去重，但在很多实际场景中，合并后去除重复项是常见的需求。通常会结合 Set 对象或 filter() 方法来实现。

const dataA = [1, 2, 3];
const dataB = [3, 4, 5];

const combined = [...dataA, ...dataB]; // [1, 2, 3, 3, 4, 5]

// 去重
const uniqueCombined = [...new Set(combined)];
console.log(uniqueCombined); // [1, 2, 3, 4, 5]

这些后续处理方法，通常会链式调用，形成一个清晰的数据处理管道，让代码既高效又易读。合并只是起点，真正的数据价值往往在后续的加工中才能体现出来。

好了，本文到此结束，带大家了解了《JS合并数组去重方法详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！