对象数组某个属性值相同的数据合并

数字浪儿

已于 2024-01-31 15:57:07 修改

阅读量356

点赞数 4

分类专栏：数据处理文章标签： javascript 前端 https vue.js 前端框架

于 2024-01-30 16:37:19 首次发布

本文链接：https://blog.csdn.net/weixin_45128657/article/details/135936196

版权

数据处理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在开发过程中，遇见后台传递的对象数组数据太散的时候，我们需要重构数据使用，借鉴两种方法来合并数据，总结如下：

需要处理的数据

result: [
	{ name: 'a', score: 80 },
	{ name: 'b', score: 90 },
	{ name: 'c', score: 60 },
	{ name: 'a', score: 50 },
	{ name: 'b', score: 66 }
]

方法一将相同name字段属性的对象放入children的数组中，生成一个新的对象数组
相同数据整合

handlerDatas(arr){
    const obj = {};
    let keyList = []
    arr.forEach((item, index) => {
	    const { name} = item; //解构赋值
	    if (!obj[name]) {
	       obj[name] = { name, children: []}
	       keyList.push(obj[name])
		}
	    obj[name].children.push(item);
	});
	return keyList
}
handlerDatas(result)

合并后的数据如下

data:[
	{name: 'a', children:[{name:'a', score: 80},{ name: 'a', score: 50 }]},
	{name: 'b', children:[{name:'b', score: 90},{ name: 'b', score: 66 }]},
	{name: 'c', children:[{name:'c', score: 60}]}
]