ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

js数组从子级向父级遍历

2021-06-18 16:55:04  阅读:203  来源: 互联网

标签:name 父级 age children js item rate id 从子级


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

实战项目需求参考:

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

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

  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,
			}
		],
	}
];

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

代码实现:

首先是公共代码:

function isExist(x) {
	return x !== null && x !== undefined;
}
function lastTraversalTree(fn, children) {
	if (!Array.isArray(children)) return [];
	return children.map(child => {
		if (child && Array.isArray(child.children)) {
			child.children = lastTraversalTree(fn, child.children);
		}
		return fn(child);
	}).filter(isExist);
}

接下来是处理数据的代码

const resList = lastTraversalTree((item) => {
	const {children, age, rate} = item;
	if (children && children.length > 0) {
		let res = {
			age: 0,
			rate: 0,
			children: null,
		};
		children.forEach(item => {
			const { age, rate } = item;
			res.age += age || 0;
			res.rate += rate || 0;
		})
		item.age = res.age;
		item.rate = res.rate;
		children.push({
			id: Math.random() + (+new Date()),
			name: `${item.name}的数据`,
			...res,
		})
	}
	return item;
}, list)

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

标签:name,父级,age,children,js,item,rate,id,从子级
来源: https://blog.51cto.com/u_15275953/2924463

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有