递归实现对象数组子级嵌套——类似于树形结构

野性酷女 2022-10-16 09:55 96阅读 0赞

需求：现有一个对象数组：

var datascource = [{ 
    	name:"元器件",
    	noHead:true,
    	children:[{ 
    		Id:2,
    		name:"技术部",
    		Status:1,
    		children:[{ 
    			Id:3,
    			name:"张飞",
    			Status:1
    		},{ 
    			Id:4,
    			name:"关羽",
    			Status:1
    		},{ 
    			Id:5,
    			name:"刘备",
    			Status:1
    		}]
    	},{ 
    		Id:20,
    		name:"采购部",
    		Status:1,
    		children:[{ 
    			Id:23,
    			name:"张三",
    			Status:1
    		},{ 
    			Id:24,
    			name:"李四",
    			Status:1
    		},{ 
    			Id:25,
    			name:"王五",
    			Status:1
    		}]
    	}]
    }]

需改为下面的数据结构：

var datascource = [{ 
    	name:"元器件",
    	noHead:true,
    	children:[{ 
    		Id:2,
    		name:"技术部",
    		Status:1,
    		children:[{ 
    			Id:3,
    			name:"张飞",
    			Status:1,
    			children:[{ 
    				Id:4,
    				name:"关羽",
    				Status:1,
    				children:[{ 
    					Id:5,
    					name:"刘备",
    					Status:1
    				}]
    			}]
    		}]
    	},{ 
    		Id:20,
    		name:"采购部",
    		Status:1,
    		children:[{ 
    			Id:23,
    			name:"张三",
    			Status:1,
    			children:[{ 
    				Id:24,
    				name:"李四",
    				Status:1,
    				children:[{ 
    					Id:25,
    					name:"王五",
    					Status:1
    				}]
    			}]
    		}]
    	}]
    }]

简单来说，就是把兄弟数据变成子孙数据，而且子孙只有一项，如果有孙子，则数据变成曾孙子，一层一层的改变：  
5个为一组，如果数量超过5个，则变成子级的子级，也就是孙子数据。

handleData(datascource);
    handleData(dataArr) { 
        dataArr && dataArr.forEach(child => { 
            if (child.children && child.children.length > 5) { 
                var data = child.children.splice(5, child.children.length - 1);
                child.children && child.children.map(c => { 
                    if (data.length) { 
                        c.children = data.splice(0, 1);
                    }
                })
                var row = Math.ceil(data.length / 5);
                for (var i = 0; i < row; i++) { 
                    if (data.length) { 
                        child.children && child.children.map(c => { 
                            this.recurrenceData(c.children, data);
                        })
                    }
                }
            }
        })
        return dataArr;
    },
    recurrenceData(arr, data) { 
        var i = 0;
        arr && arr.forEach(a => { 
            if (a.children&&a.children.length) { //递归查找，直到找到没有children的最后一级，这一级就是要插入数据的一级。
                this.recurrenceData(a.children,data);
            } else { 
                if (data.length > 0) { 
                    a.children = data.splice(0, 1);
                }
            }
        })
    },

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221014/230ccdc7482f4a45b5637140dc93b3ec.png