js数组从子级向父级遍历

分手后的思念是犯贱 2023-06-13 09:42 13阅读 0赞

大家开发的时候是不是会经常遇到这种需求，一个N个层级的数组，只有叶子级的数据有金额或者其他的信息，然后需求需要你把每个父级都加上汇总的数据集合。那么我们该怎么做呢？

#### 实战项目需求参考： ####

上面的数据是计算错误的，圈出来的地方要求数据是正确的，需要计算。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

#### 我们自己的解决思路整理如下： ####

1.  既然只有子级有数据，然后上面的每一个层级都需要汇总那么肯定是优先计算最深的层级了。所以我们遍历数据需要做特殊处理或者我们把数组反过来。
2.  写个方法进行累加的操作，或者就用数组的reduce方法。
3.  把累加的结果追加到他的children末尾项用于展示。

#### 测试用例: ####

const list = [
    	{ 
    		id: 1,
    		name: '一班',
    		age: '',
    		rate: '',
    		children: [
    			{ 
    				id: 3,
    				name: '一组',
    				age: '',
    				rate: '',
    				children: [
    					{ 
    						id: 5,
    						name: '啊',
    						age: 2,
    						rate: 3,
    						children: null,
    					}, { 
    						id: 6,
    						name: '吧',
    						age: 2,
    						rate: 3,
    						children: null,
    					}
    				],
    			}, { 
    				id: 4,
    				name: '二组',
    				age: '',
    				rate: '',
    				children: [
    					{ 
    						id: 7,
    						name: '成',
    						age: 3,
    						rate: 3,
    						children: null,
    					}, { 
    						id: 8,
    						name: '的',
    						age: 3,
    						rate: 3,
    						children: null,
    					}
    				],
    			}
    		],
    	}, { 
    		id: 2,
    		name: '二班',
    		age: '',
    		rate: '',
    		children: [
    			{ 
    				id: 9,
    				name: '额',
    				age: 4,
    				rate: 5,
    				children: null,
    			}, { 
    				id: 10,
    				name: '发',
    				age: 4,
    				rate: 5,
    				children: null,
    			}
    		],
    	}
    ];

我们今天就来处理这个数据，把每一个层级都追加个结果项数据。

#### 代码实现： ####

首先是公共代码：

接下来是处理数据的代码

接下来我们看结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]  
是不是很棒呢？如果有bug或可优化的地方欢迎大家评论指出修改~！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115195729909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191115201352944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly93dWRpOTguYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70