悠悠楠杉
网站页面
如何用JavaScript合并数组并保留重复项：实战技巧解析
09/07
如何用JavaScript合并数组并保留重复项：实战技巧解析
在实际开发中，我们经常遇到需要合并两个数组但不去重的情况。与常见的数组合并方案不同，保留重复元素往往有其特殊用途。下面我们就来探讨几种实用的实现方法。
基础合并方法
1. concat()方法
最直接的数组合并方式：
javascript
const arr1 = ['标题A', '关键词X'];
const arr2 = ['描述B', '正文内容'];
const mergedArray = arr1.concat(arr2);
// 结果: ['标题A', '关键词X', '描述B', '正文内容']
2. 展开运算符(...)
ES6带来的更优雅的写法：
javascript
const combined = [...arr1, ...arr2];
// 保持原有元素顺序且包含所有重复项
高级应用场景
处理对象数组的合并
当数组成员是对象时，需要特别注意引用问题：javascript
const articles = [
{title: '标题A', wordCount: 1200},
{title: '关键词分析', wordCount: 950}
];
const newArticles = [
{title: '行业动态', wordCount: 1100},
{title: '标题A', wordCount: 800} // 重复标题但不同内容
];
// 深度合并保留所有元素
const fullCollection = [...articles, ...newArticles];
带条件合并的实用案例
有时我们需要在合并时进行简单处理：
javascript
function mergeWithMarkers(arrA, arrB) {
return [
...arrA.map(item => `[原始]${item}`),
...arrB.map(item => `[新增]${item}`)
];
}
性能优化方案
对于超大型数组（10万+元素）的合并，建议采用分批处理策略：
javascript
function chunkMerge(arr1, arr2, chunkSize = 5000) {
const result = [];
let i = 0;
while (i < arr1.length || i < arr2.length) {
result.push(
...arr1.slice(i, i + chunkSize),
...arr2.slice(i, i + chunkSize)
);
i += chunkSize;
}
return result;
}
常见问题解决方案
处理稀疏数组
当遇到稀疏数组时，需要特别注意undefined值的处理：javascript
const sparseArray = [1,,3];
const denseArray = [4,5,6];
const safeMerge = [...sparseArray].filter(el => el !== undefined)
.concat([...denseArray]);
多维数组展开
如果要合并嵌套数组的所有层级元素：
javascript
function flattenMerge(...arrays) {
return arrays.flat(Infinity);
}
掌握这些技巧后，你可以更灵活地处理各种数据聚合需求，特别是在需要保留所有原始信息的情况下。值得注意的是，虽然这些方法简单，但在大型项目中要注意内存管理，避免不必要的性能损耗。
