当前位置：首页 > news >正文

ts实现合并数组对象中key相同的数据

news 2025/9/13 21:52:33

背景

在平常的业务中，后端同学会返回以下类似的结构数据

// 后端返回的数据结构
[{ id: 1, product_id: 1, pid_name: "Asia", name: "HKG01" },{ id: 2, product_id: 1, pid_name: "Asia", name: "SH01" },{ id: 3, product_id: 2, pid_name: "Europe", name: "NY04" },{ id: 4, product_id: 2, pid_name: "Europe", name: "HK02" },{ id: 5, product_id: 2, pid_name: "Europe", name: "HK10" },{ id: 6, product_id: 1, pid_name: "Asia", name: "HKG05" }
]

前端展示时需要归类展示，因此需要构造类似[{parent: "xx", child: [{xx},{xx}]}] 这样的数据

// 前端处理后的结构
[{ parent: "Asia",child: [{ id: 1, product_id: 1, pid_name: "Asia", name: "HKG01" },{ id: 2, product_id: 1, pid_name: "Asia", name: "SH01" },{ id: 5, product_id: 1, pid_name: "Asia", name: "HKG05" }]} ,{ parent: "Europe", child: [{ id: 3, product_id: 2, pid_name: "Europe", name: "NY04" },{ id: 4, product_id: 2, pid_name: "Europe", name: "HK02" },{ id: 4, product_id: 2, pid_name: "Europe", name: "HK10" }]} 
]

合并数组对象中key相同的数据

构造 [ { parent: "xx", child: [ { xx }, { xx } ] } ] ，需要传入数据源，匹配合并的键

type MergeByKeyParam<T> = {dataSource: Array<T>; // 数据源key: string; // 匹配的键prop: string; // 匹配的键名
};
type MergeByKeyResult<T> = {parent: string;child: Array<T>;
};
export const mergeByKey = <T>({ dataSource, key, prop }: MergeByKeyParam<T>): Array<MergeByKeyResult<T>> => {const dataObj = {};for (const item of dataSource) {if (!dataObj[item[key]]) {dataObj[item[key]] = {parent: item[prop],child: []};}dataObj[item[key]].child.push(item);}return Object.values(dataObj);
};

const showRegionList = (regionArr: ICoupon.AvailabilityZone[]) => {return mergeByKey<ICoupon.AvailabilityZone>({ dataSource: regionArr, key: "pid", prop: "pid_name" });
};