对象数组中对值相同的数据进行合并 —— 递归函数写法

分手后的思念是犯贱 2021-09-19 16:38 228阅读 0赞

在做许多管理系统的时候我们会遇到许多需要对表格数据进行合并的需求，如下图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70][]

在上述例子中，我们得到的数据可能是扁平的，类似于

[{
    		'品类':'帽子/针织/长巾',
    		'配色/尺码':'红褐色/L',
    		'生产计划数':'800顶',
    		'纱线':'42支哔哩啪啦',
    		'颜色':'蓝色',
    		'重量':'10千克'
    	},{
    		'品类':'帽子/针织/长巾',
    		'配色/尺码':'红褐色/L',
    		'生产计划数':'800顶',
    		'纱线':'32支哔哩啪啦',
    		'颜色':'蓝色',
    		'重量':'10千克'
    	},{
    		'品类':'帽子/针织/长巾',
    		'配色/尺码':'红褐色/L',
    		'生产计划数':'800顶',
    		'纱线':'42支哔哩啪啦',
    		'颜色':'紫色',
    		'重量':'10千克'
    	},{
    		'品类':'帽子/针织/长巾',
    		'配色/尺码':'红褐色/L',
    		'生产计划数':'800顶',
    		'纱线':'42支哔哩啪啦',
    		'颜色':'紫色',
    		'重量':'10千克'
    	}]
    ...........

不难发现，这个扁平数组中上面有相当多重复数据，也就是可以合并的数据，我们可能会希望对部分值相同的数据进行合并，比如我们希望先对品类相同的数据合并，再根据尺码/配色相同的数据也进行一次合并，然后..........

最终我们得到表格所需要展示的合并后的多层结构的对象。

这里我提供一个可以合并扁平数据的函数，有需要的可以看一下下面的例子，后面注释的一部分代码是一些思考，需要讨论的可以扫左上角二维码

<script type="text/javascript">
    
    let json = [{
    	sex:'女',
    	name:'女1号',
    	from:'中国'
    },{
    	sex:'女',
    	name:'女2号',
    	from:'中国'
    },{
    	sex:'女',
    	name:'女3号',
    	from:'韩国'
    },{
    	sex:'男',
    	name:'男1号',
    	from:'中国'
    },{
    	sex:'男',
    	name:'男2号',
    	from:'韩国'
    },{
    	sex:'男',
    	name:'男3号',
    	from:'美国'
    },{
    	sex:'男',
    	name:'男4号',
    	from:'中国'
    }]
    
    function jsonMerge(jsonArr,keyArr){
    	let newJson = [] //合并好的数据都放在这个数组里
    	jsonArr.forEach((itemJson,indexJson)=>{
    		let mark = -1
    		let finded = newJson.find((itemFind, indexFind) => {
    			if (itemFind[keyArr[0]] === itemJson[keyArr[0]]) {
    				mark = indexFind
    				return itemFind[keyArr[0]] === itemJson[keyArr[0]]
    			}
    		})
    		if(!finded){
    			let value = {}
    			value[keyArr[0]] = itemJson[keyArr[0]]
    			value['info'] = []
    			let info = {}
    			for(let i in itemJson){
    				if(i!==keyArr[0]){
    					info[i] = itemJson[i]
    				}
    			}
    			value['info'].push(info)
    			newJson.push(value)
    		}else{
    			let info = {}
    			for(let i in itemJson){
    				if(i!==keyArr[0]){
    					info[i] = itemJson[i]
    				}
    			}
    			newJson[mark]['info'].push(info)
    		}
    	})
    	// 递归的条件是不断的缩减keyArr的length，每次都去除第零个，直到为0
    	if(keyArr.length === 1){
    		return newJson
    	}else{
    		return newJson.map((itemInfo)=>{
    			let newKeyArr = []
    			keyArr.forEach((item,index)=>{
    				if(index>0){
    					newKeyArr.push(item)
    				}
    			})
    			return{
    				[keyArr[0]]:itemInfo[keyArr[0]],
    				'info':jsonMerge(itemInfo['info'],newKeyArr)
    			}
    		})
    	}
    }
    
    console.log(jsonMerge(json,['sex','from']))
    
    // function jsonMerge(jsonArr,key,newKey){
    // 	let json = jsonArr
    // 	let newJson = []
    // 	json.forEach((item,index)=>{
    // 		let mark = -1
    // 		let finded = newJson.find((itemFind,indexFind)=>{
    // 			if(itemFind[key]===item[key]){
    // 				mark = indexFind
    // 				return itemFind[key]===item[key]
    // 			}
    // 		})
    // 		if(!finded){
    // 			let value = {}
    // 			value[key] = item[key]
    // 			value[newKey] = []
    // 			let itemJson = {}
    // 			for(i in item){
    // 				if(i!==key){
    // 					itemJson[i] = item[i]
    // 				}
    // 			}
    // 			value[newKey].push(itemJson)
    // 			newJson.push(value)
    // 		}else{
    // 			let itemJson = {}
    // 			for(i in item){
    // 				if(i!==key){
    // 					itemJson[i] = item[i]
    // 				}
    // 			}
    // 			newJson[mark][newKey].push(itemJson)
    // 		}
    // 	})
    // 	return newJson
    // }
    // let sexMerge = jsonMerge(json,'sex','arr')
    // let fromMerge = jsonMerge(json,'from','arr')
    // console.log(sexMerge,fromMerge)
    /*
    	目前能根据单个key进行合并，如我需要合并key值sex，就可以得到
    	json = [{
    		sex:'女'，
    		info:[{
    			name:'女一号',
    			from:'中国'
    		},{
    			name:'女二号',
    			from:'中国'
    		} ...]
    	},{
    		sex:'男'，
    		info:[{
    			name:'男一号',
    			from:'中国'
    		},{
    			name:'男二号',
    			from:'韩国'
    		} ...]
    	}]	
    
    	我想实现的效果，根据多个key进行合并，如我先合并key值sex相同的数据，再合并from相同的数据
    	json = [{
    		sex:'女'，
    		info:[{
    			from:'中国'，
    			info:[{
    				name:'女1号'
    			},{
    				name:'女2号'
    			}...]
    		},{
    		sex:'女'，
    		info:[{
    			from:'韩国'，
    			info:[{
    				name:'女3号'
    			},{
    				name:'女4号'
    			}...]
    		}]
    */
    </script>

最终结果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70]: /images/20210812/7923d2b9e2964d3ead0178e18ad832a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RrcjM4MDIwNTk4NA_size_16_color_FFFFFF_t_70 1]: /images/20210812/d32f10ac21b14c4c93b9ebe71a746877.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 php合并多维数组,递归合并

php合并多维数组,递归合并 php有array\_merge合并数组功能，但是有个问题，这个函数只合并一维数组，如果有多维数组，则后面的会覆盖前面数组中的子节点，因此写

た入场券/ 2023年10月06日 16:44/ 0 赞/ 61 阅读

相关过滤对象数组中key值相同的数据(数组合并去重)

如果有遇到一个数组中存储多个对象，有部分对象的某一个键值是相同的，需要过滤掉重复项的实现方案 const arr =[ {

ゞ浴缸里的玫瑰/ 2023年07月11日 15:21/ 0 赞/ 17 阅读

相关封装函数：数组对象中去除相同ID的项、递归找到所在ID的所有父级元素

记录下项目开发中遇到的两个实际需求。 1.数组对象中去除相同ID的项从后台接口拿到的数据格式是数组对象，但是会存在前后调用同一个接口数据项重复的现象。导致页面中数据显

青旅半醒/ 2023年05月29日 11:43/ 0 赞/ 5 阅读

相关将数组中的每一个对象中相同属性值进行累加

let info=[ { name:"小明", sc

ゝ一纸荒年。/ 2023年01月10日 14:50/ 0 赞/ 137 阅读

相关合并table中值相同的列

<script type="text/javascript"> window.οnlοad=function()\{ var listTable = document.

我就是我/ 2022年08月10日 13:58/ 0 赞/ 180 阅读

相关递归求解数组中的最大值

当i=0,Max(A,i)=A\[0\];//递归出口否则,Max(A,i)=max(Max(A,i-1),A\[i\]);//max是取最大值问题及代码：

水深无声/ 2022年07月28日 10:50/ 0 赞/ 244 阅读

相关递归函数调用递归函数

题目如下：问下列代码的打印结果为0吗？ \[cpp\] [view plain][] [copy][view plain] 1. \include <stdlib.h>

柔光的暖阳◎/ 2022年06月13日 10:07/ 0 赞/ 349 阅读

相关递归（求对象中无底洞值）

今天想到了运用递归求出，对象中嵌套对象的无底洞的值。。。 function m(data)\{ console.log('leixcng::',typ

冷不防/ 2022年06月05日 12:51/ 0 赞/ 171 阅读

相关 list中对相同name的内容，对count值加和，最终相同name合并成一条数据

package until; / Created by csucoderlee on 2019/4/30 <p>

痛定思痛。/ 2021年09月28日 12:58/ 0 赞/ 205 阅读

相关对象数组中对值相同的数据进行合并 —— 递归函数写法

在做许多管理系统的时候我们会遇到许多需要对表格数据进行合并的需求，如下图所示： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

分手后的思念是犯贱/ 2021年09月19日 16:38/ 0 赞/ 229 阅读