js怎么合并两个数组不去重

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

在JavaScript中，要合并两个数组并且不去除重复项，最直接也是我个人最常用的方法就是利用

concat()

...

解决方案

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

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()

concat()

展开运算符

...

从性能角度看，对于大多数实际应用场景，两者之间的性能差异可以忽略不计。JavaScript引擎对这两种操作都进行了高度优化。然而，理论上讲，

concat()

所以，我的建议是：在现代项目中，如果追求代码简洁和灵活性，用展开运算符；如果考虑到兼容性或者偏爱更函数式的表达，

concat()

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

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

无论是

concat()

在这种极端情况下，如果允许修改原始数组，可以考虑使用

push()

CodiumAI

AI代码测试工具，在IDE中获得重要的测试建议

下载

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)

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]

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