高效处理大型 TypeScript 对象数组：基于 ID 合并数据
在前端开发中，我们经常会遇到需要处理大型对象数组的场景，比如后端返回的分页数据需要合并、不同接口获取的同类型数据需要整合等。当数组规模较大时，常规的遍历查找方式会带来性能问题，本文将介绍一种基于 ID 映射的高效合并方案，既保证性能又能处理边界情况。
常规方案的性能问题
很多开发者遇到数组合并需求时，第一反应是使用嵌套循环或者 find 方法查找目标对象，比如下面的写法：
// 待合并的原始数组
const sourceList = [
{ id: 1, name: '商品A', price: 100 },
{ id: 2, name: '商品B', price: 200 },
{ id: 3, name: '商品C', price: 300 }
];
// 需要合并的新数据，部分ID和原始数组重复
const newList = [
{ id: 2, name: '商品B', price: 250 },
{ id: 4, name: '商品D', price: 400 }
];
// 常规合并方式：遍历新数组，查找原始数组中是否存在相同ID
const result = [...sourceList];
newList.forEach(newItem => {
const existIndex = result.findIndex(item => item.id === newItem.id);
if (existIndex > -1) {
// 已存在则更新数据
result[existIndex] = { ...result[existIndex], ...newItem };
} else {
// 不存在则新增
result.push(newItem);
}
});
console.log(result);这种方式在数组长度较小时没有感知，但当数组长度达到万级甚至十万级时，findIndex 每次都需要遍历整个数组，时间复杂度会达到 O(n*m)，性能会明显下降。
基于 ID 映射的高效方案
我们可以通过建立 ID 到对象的映射关系，将查找操作的时间复杂度从 O(n) 降到 O(1)，大幅提升处理效率。核心思路是先将原始数组转换为以 ID 为键的 Map 对象，再遍历新数组合并数据，最后将 Map 转回数组。
完整的实现代码如下：
// 定义对象类型，包含id字段和其他可选字段
interface DataItem {
id: number;
[key: string]: any;
}
/**
* 基于ID合并两个对象数组，相同ID的对象会合并新数据，不同ID的对象会保留
* @param source 原始数组
* @param target 待合并的新数组
* @returns 合并后的数组
*/
function mergeArrayById(source: DataItem[], target: DataItem[]): DataItem[] {
// 边界判断：如果原始数组为空，直接返回新数组
if (!source || source.length === 0) {
return [...(target || [])];
}
// 如果新数组为空，直接返回原始数组副本
if (!target || target.length === 0) {
return [...source];
}
// 建立原始数组的ID映射，使用Map避免对象键的隐式类型转换问题
const idMap = new Map<number, DataItem>();
source.forEach(item => {
if (item.id !== undefined && item.id !== null) {
idMap.set(item.id, { ...item });
}
});
// 遍历新数组合并数据
target.forEach(newItem => {
if (newItem.id === undefined || newItem.id === null) {
// 没有ID的项直接跳过，或者根据需求处理
return;
}
if (idMap.has(newItem.id)) {
// 已存在相同ID，合并数据，新数据优先级更高
const oldItem = idMap.get(newItem.id)!;
idMap.set(newItem.id, { ...oldItem, ...newItem });
} else {
// 不存在相同ID，直接新增
idMap.set(newItem.id, { ...newItem });
}
});
// 将Map转回数组并返回
return Array.from(idMap.values());
}
// 测试示例
const sourceList: DataItem[] = [
{ id: 1, name: '商品A', price: 100, stock: 50 },
{ id: 2, name: '商品B', price: 200, stock: 30 },
{ id: 3, name: '商品C', price: 300, stock: 20 }
];
const newList: DataItem[] = [
{ id: 2, name: '商品B', price: 250 },
{ id: 4, name: '商品D', price: 400, stock: 10 }
];
const mergedResult = mergeArrayById(sourceList, newList);
console.log(mergedResult);
// 输出结果：
// [
// { id: 1, name: '商品A', price: 100, stock: 50 },
// { id: 2, name: '商品B', price: 250, stock: 30 }, // 价格被更新，库存保留
// { id: 3, name: '商品C', price: 300, stock: 20 },
// { id: 4, name: '商品D', price: 400, stock: 10 } // 新增的商品
// ]方案优势说明
- 性能优势：建立映射的时间复杂度是 O(n)，遍历新数组的时间复杂度是 O(m)，合并操作整体时间复杂度为 O(n+m)，相比常规嵌套循环效率提升明显，尤其适合大型数组场景。
- 数据安全：使用扩展运算符和 Map 的浅拷贝操作，不会修改原始数组的数据，避免副作用。
- 灵活可扩展：合并逻辑中使用了对象展开运算符合并数据，新数据中存在的字段会覆盖旧数据，不存在的字段会保留，符合大多数业务场景的需求，也可以根据业务需要调整合并策略。
- 边界处理完善：对空数组、缺失 ID 的异常数据都做了兼容处理，减少运行时错误。
注意事项
如果数组中的 ID 是字符串类型，只需要将 Map 的键类型从 number 改为 string，同时调整对应的类型定义即可，方案逻辑不需要大改。另外如果对象包含深层嵌套结构，浅合并可能无法满足需求，此时可以在合并时增加深拷贝逻辑，比如使用 structuredClone 或者第三方深拷贝工具处理嵌套对象。
如果处理的数组规模特别大（比如百万级以上），还可以考虑使用 Web Worker 将合并操作放到子线程执行，避免阻塞主线程导致页面卡顿。
TypeScript对象数组合并ID映射性能优化前端数据处理 本作品最后修改时间：2026-05-22 14:25:02